Search code examples
csscss-shapes

Wavy shape with CSS


I'm trying to recreate this image with CSS:

wavy shape

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>


Solution

  • 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>