wave background

by Saksham Malhotra

HTML

<div class="box">
</div>

CSS

.box {
  padding: 11% 0;
  /* The padding is the area for the shapes, adjust it based on the ratio of the shape*/
  height: 100px;
  /* to illustrate the space for the content */
  background: url(https://i.stack.imgur.com/mG3Vb.png) top /100% auto, url(https://i.stack.imgur.com/JSEyE.png) bottom/100% auto, linear-gradient(#387dff, #387dff) content-box;
  /* Color between the shapes only on the content and not the padding*/
  background-repeat: no-repeat;
}