与css的波浪形状

Question

与css的波浪形状

我正在尝试使用CSS重新创建此图像：

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

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

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

Answer 1

我认为这是制作你想要的形状的正确方法。通过使用SVG的可能性和容器来保持形状的响应。svg&nbsp;{ &nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;left:&nbsp;0;}.container&nbsp;{ &nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;padding-bottom:&nbsp;100%; &nbsp;&nbsp;vertical-align:&nbsp;middle; &nbsp;&nbsp;overflow:&nbsp;hidden;}<div&nbsp;class="container"> &nbsp;&nbsp;<svg&nbsp;viewBox="0&nbsp;0&nbsp;500&nbsp;500"&nbsp;preserveAspectRatio="xMinYMin&nbsp;meet"> &nbsp;&nbsp;&nbsp;&nbsp;<path&nbsp;d="M0,100&nbsp;C150,200&nbsp;350,0&nbsp;500,100&nbsp;L500,00&nbsp;L0,0&nbsp;Z"&nbsp;style="stroke:&nbsp;none;&nbsp;fill:red;"></path> &nbsp;&nbsp;</svg></div>