Html 创建没有图像的曲线div

我想复制一个图像效果。在此页面上，您可以看到一些带有“waves”的div容器。通过上传图像作为背景来实现弯曲效果

这就是我现在拥有的

#框{
高度：200px；
背景图像：线性梯度（135度，#47b784，#009d90 26%，#00818e 50%，#25647b 74%，#36495d）；
}

内容从这里开始

你能不能在

之前的页面顶部添加与波浪顶部相等的填充


#波浪{
位置：相对位置；
高度：70像素；
宽度：600px；
背景：#47b784；
}
#挥手：之前{
内容：“；
显示：块；
位置：绝对位置；
边界半径：100%50%；
宽度：340px；
高度：80px；
背景色：白色；
右：0；
顶部：39px；
}
#挥手：之后{
内容：“；
显示：块；
位置：绝对位置；
边界半径：100%50%；
宽度：300px；
高度：70像素；
背景色：#47b784；
左：0；
顶部：27px；
}
#页面{
填充顶部：40px；
}

内容从这里开始
只需将页边距底部添加到与波浪相关的：