CSSで曲線を描く

Question

波の動きをシミュレートするCSSを使用してアニメーションを作成します。
このために線またはdiv-を曲線に変更する必要があります...
私がよく知っているCSSルールは、div全体を半円形にするか、要素の境界を変更します。
例えば： border-radius、またはperspectiveまたはborder-top-radius...
この画像は、私が望むものを示しています。 

これについての経験はありますか？またはそれは可能ですか？
前もって感謝します...

Answer 1

非対称の境界線を使用して、CSSで曲線を作成できます。

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

デモの表示

.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と@Antfish、変換する必要はありません。上記のソリューションでは上部の境界線のみが表示されるため、このようにすることもできます。内側の曲線では下部の境界線を使用できます。

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