Tracer une courbe avec css

Question

Je veux créer une animation avec css qui simule un mouvement de vague.
Je dois changer une ligne ou une div en courbe pour cela ...
Les règles CSS que je connais, transforment le div entier en demi-cercle ou changent la bordure de l'élément.
Par exemple: border-radius, ou perspective ou border-top-radius...
Cette image vous montre ce que je veux: 

Avez-vous de l'expérience à ce sujet? ou est-ce possible?
Merci d'avance...

Answer 1

Vous pouvez utiliser une bordure asymétrique pour créer des courbes avec CSS.

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

VOIR LA DÉMO

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

Answer 2

@Navaneeth et @Antfish, pas besoin de transformer, vous pouvez faire comme ça aussi parce que dans la solution ci-dessus, seule la bordure supérieure est visible, donc pour la courbe intérieure, vous pouvez utiliser la bordure inférieure.

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