是否有可能用波浪结构掩盖div

Question

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

Answer 1

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; 
}