CSS を使用して曲線状の透明な Div を作成するにはどうすればよいですか?

CSS を使用した湾曲した透明な Div の作成

湾曲した形状の透明な Div をデザインする探求の中で、目的を達成するのに困難が生じました。効果。この課題を克服し、求める曲線形状を作成する方法を検討してみましょう。

曲線形状を作成するために、CSS にはクリップ パス プロパティが用意されており、これを使用すると、さまざまな幾何学的関数を使用して要素の形状を定義できます。これを上部の要素または下部の要素に適用して、オーバーレイ効果を作成できます。

次のコード スニペットは、クリップ パスを使用して目的の形状を実現する方法を示しています。

.first, .second {
  display: inline-block;
  margin: 5px;
}

/* For the first div */
.first .top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.first .bottom {
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

/* For the second div */
.second .top {
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.second .bottom {
  clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

このコードは 2 つの div を作成します。1 つは円形の上部と黄色の下部を持ち、もう 1 つはカスタムの多角形の上部と黄色の下部を持ちます。クリップパスの値を調整することで、必要に応じてさまざまな曲線形状を作成できます。

クリップパスを利用すると、魅力的な曲線形状をデザインし、Web サイトや Web アプリケーションの美的魅力を高めることができます。

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