☰

CSSで曲線を描く 質問する

tag-icon • tag-icon css curve
CSSで曲線を描く 質問する

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

これは可能ですか? もし可能であれば、どうすれば実現できますか?

ベストアンサー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>

おすすめ記事