Wavy shape with css

Question

I'm trying to recreate this image with CSS:

I would not need it to repeat. This is what I started but it just has a straight line:

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

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

Answer 1

I think this is the right way to make a shape like you want. By using the SVG possibilities, and an container to keep the shape responsive.

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>

Answer 2

I'm not sure it's your shape but it's close - you can play with the values:

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>