как создать форму волны с помощью CSS

Question

Я пытаюсь воссоздать это изображение с svg:

Вот скрипка: http://jsfiddle.net/g7kgdo8u/

Но мне нужно это изображение с помощью CSS.
Возможно ли это?

Answer 1

Вы также можете сделать это с radial-gradient:

.box {
  width:300px;
  height:100px;
  background:
  radial-gradient(circle at 50% -300%,blue 90%,transparent 90.5%),
  radial-gradient(circle at 60% -300%,grey 90%,transparent 90.5%);
}

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

Answer 2

Вы можете использовать border-bottom-left-radius и border-bottom-right-radius

div {  
  background-color: lightgrey;
  height: 55px;
  width: 300px;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 50%;
}

div:after {
  content:"";
  display: block;
  background-color: cornflowerblue;
  height: 50px;
  width: 300px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div></div>