CSS を使用して DIV の湾曲した底部を作成するにはどうすればよいですか?

CSS を使用して DIV の下部を内側に湾曲させる

図に示すように湾曲した下部効果を実現するには、1 つのテクニックとして、border-radius を使用します。特定の値。実装方法は次のとおりです。

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

このコードは、次のように下端が丸い長方形の DIV を作成します。

Transparent Curves

あるいは、放射状グラデーションを使用して透明なグラデーションを作成することもできます。曲線:

body {
  background: pink;
}

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

<div class="container"></div>

このアプローチにより、底部が湾曲した半透明の青色の形状が得られます。

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