CSS を使用して DIV に曲線の下端を作成するにはどうすればよいですか?

CSS を使用して DIV に曲線の下端を作成する

長方形の div で目的の曲線の下端を実現するには、次の手順に従います。

使用中border-radius

border-radius プロパティは丸い角を作成できます。上隅と下隅にさまざまな半径値を指定することで、湾曲した下端を作成できます。

.curved {
  margin: 0 auto;
  height: 400px;
  background: lightblue;
  border-radius: 0 0 200px 200px;  
}

放射状グラデーションを使用する

透明な曲線を使用する場合形状を変更するには、放射状グラデーションを使用できます。

body {
  background: pink;
}

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}

これらのメソッドは、目的を達成するための 2 つの異なる方法を提供します。湾曲した下端により、デザインのニーズに合わせて効果をカスタマイズできます。

以上がCSS を使用して DIV に曲線の下端を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。