与css的波浪形状

我试图用CSS重新创build这个图像：

我不需要重复。 这是我开始的，但它只是一条直线：

#wave { position: absolute; height: 70px; width: 600px; background: #e0efe3; } 

 <div id="wave"><div/> 

Answer 1

我不确定这是你的形状，但它很接近 – 你可以玩的价值观：

https://jsfiddle.net/7fjSc/9/

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

 <div id="wave"></div> 

Answer 2

我认为这是制作你想要的形状的正确方法。 通过使用SVG的可能性，和一个容器来保持形状响应。

 svg { display: inline-block; position: absolute; top: 0; left: 0; } .container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; } 

 <div class="container"> <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"> <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:red;"></path> </svg> </div>