Html 是否有可能用波形结构屏蔽div

我有一个顶部为波浪结构的设计，底部为三个静态图像。顶部图像是横幅图像，即动态的，用户将上传一个图像，我们需要以波浪结构的div显示该图像，如下所示。是否有任何方法可以使用svg、canvas、HTML和css3实现它

您可以使用以下值：
HTML:
CSS:
#挥手{
位置：相对位置；
高度：70像素；
宽度：600px；
背景：#e0efe3；
}
#挥手：之前{
内容：“；
显示：块；
位置：绝对位置；
边界半径：100%50%；
宽度：340px；
高度：80px；
背景色：白色；
右：-5px；
顶部：40px；
}
#挥手：之后{
内容：“；
显示：块；
位置：绝对位置；
边界半径：100%50%；
宽度：300px；
高度：70像素；
背景色：#e0efe3；
左：0；
顶部：27px；
}

@Dana的可能重复项这不是重复项。我希望图像适合该曲线分割。我不希望使用绝对值进行分割定位。我不希望这样。

 You can play with the values:
 HTML:
<div id="wave"></div>
CSS:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
 }
 #wave:after {
  content: "";
 display: block;
 position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}