Нарисуйте кривую с помощью css

Я хочу создать анимацию с css, которая имитирует движение волны.
Мне нужно изменить строку - или div - на кривую для этого...
Правила CSS, которые мне знакомы, делают весь div полукруглым или изменяют границу элемента.
Например: border-radius, или perspective или border-top-radius...
Это изображение показывает вам то, что я хочу:

У вас есть опыт? или это возможно?
Спасибо в Advance...

Ответ 1

Существует способ сделать несимметричную границу.

пример:

border-radius: 50%/100px 100px 0 0;

таким образом вы можете сделать кривую с помощью CSS.

VIEW DEMO

CSS

.box{
  width:500px; height:100px;  
  border:solid 5px #000;
  border-color:#000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
}

HTML

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

Ответ 2

@Navaneeth и @Antfish, вам не нужно преобразовывать, вы также можете сделать это:

.box {
   width: 500px;
   height: 100px;
   border: solid 5px #000;
  border-color: transparent transparent #000 transparent;
  border-radius: 0 0 240px 50%/60px;
}

потому что в приведенном выше решении видна только верхняя граница, поэтому для внутренней кривой вы можете использовать нижнюю границу.