style - Dibuja una curva con css

fieldset title html

Question

Quiero crear una animación con css que simule un movimiento de onda.
Necesito cambiar una línea o div en una curva para esto ...
Las reglas de CSS con las que estoy familiarizado, hacen que todo el div sea semicircular o cambie el borde del elemento.
Por ejemplo: border-radius , o perspective o border-top-radius ...
Esta imagen te muestra lo que quiero:

¿Tienes experiencia sobre esto? o es posible?
Gracias por adelantado...

Answer 1

@Navaneeth y @Antfish, no hay necesidad de transformar, puede hacerlo así también porque en la solución anterior solo se ve el borde superior, así que para la curva interior puede usar el borde inferior.

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

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

Answer 2

Podrías usar un borde asimétrico para hacer curvas con CSS.

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

VER DEMO

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

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