Curves / Waves in CSS

Question

Is it possible to do, in pure css or with some other technique these wavy effects (image attached)? I don’t want to use images to make them.

Answer 1

Fiddle

Source

css

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

Answer 2

A question, you would like to work with the elements div, img with a ripple effect?

Or just a line with ripple effect? You can make an effect like this with the element <hr>

Selector :after, insert a content before the specified element;

Selector :before, insert a content to the specified element;

To make it more visual as I’m riding this line "half wavy":

I take advantage of the diagonals of the content created before and after the element hr to try to create a ripple effect that is not perfect, but reasonable.

.wave {
  border:0px;
  position: relative;
  height: 70px;
  width: 100%;
  background: white;
}

.wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  border-style: groove hidden hidden hidden;
  border-color: #ff0000;
  width: 57%;
  height: 80px;
  background-color: white;
  right: 0px;
  top: 40px;
}

.wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  border-style: hidden hidden groove hidden;
  border-color: #ff0000;
  width: 50%;
  height: 70px;
  background-color: white;
  left: 0;
  top: 27px;
}

<hr class="wave" />