波の構造を持つdivをマスクすることは可能ですか？

Question

波の構造を底にした3つの静的画像を持つデザインを持っています。画像はバナー画像です。つまり動的です。ユーザーは画像をアップロードします。下に示すような波の構造を持つ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; 
}