Search code examples
csscss-shapes

Creating CSS wave shape

Sample image

I would like to archive this kind of shape using CSS.

#wave {
  position: absolute;
  height: 50%;
  width: inherit;
  background: #e0efe3;
}

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

  • You can achieve it using border-radius, relative positioning a little CSS gradient and some z-index.

    HTML

    <div class="topdiv">Top Content</div>
<div class="overlapdiv"></div>
<div class="bottomdiv">Bottom Content</div>

    CSS

    div {
  width: 500px;
  min-height: 200px;
  position: relative;
}
.topdiv {
  background-color: #911bc9;
  border-radius: 0 0 0 100px;
  z-index: 2;
}
.overlapdiv {
  top: -100px;
  background: linear-gradient(90deg,rgba(168, 57, 224, 1) 0%,rgba(168, 57, 224, 1) 50%,rgba(145, 27, 201, 1) 50%,rgba(145, 27, 201, 1) 100%);
}
.bottomdiv {
  background-color: #a839e0;
  z-index: 1;
  border-radius: 0 100px 0 0;
  top: -200px;
}

    DEMO