クリップパスを使用して、湾曲した透明な DIV を作成するにはどうすればよいですか?

上部が透明な曲線 DIV を作成する

あなたは、独自の曲線を実現するために境界線を使用して、かなりの幅と高さの透明な DIV を作品に組み込みたいと考えています。形。希望する外観は、提供した画像の黄色の形状で例示されています。

この効果を実現するには、形状を正確に調整できる革新的なソリューションであるクリップ パスを組み込むことを検討してください。クリップ パスは、要素の表示部分を制御し、周囲の要素とシームレスにブレンドする複雑な形状を定義できるようにします。

クリップ パスは、上部レイヤーまたは下部レイヤーのいずれかに適用できます。説明のために、両方の要素がインライン ブロックとしてレンダリングされ、隣接して配置されるシナリオを考えてみましょう。

最上位レイヤーでは、クリップ パス値として円を使用し、円形のカットアウトを効果的にレンダリングします。寸法と背景画像はそれに応じて設定されます。

.top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(image.jpg) center/cover;
}

下のレイヤーは、部分的に上のレイヤーと重なるように配置され、曲率の錯覚を作り出します。クリップ パスは、より複雑なポリゴン形状を使用して定義され、目的の曲線が得られます。

.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;
  height: 100px;
  width: 200px;
  background: yellow;
}

このアプローチにより、曲線形状を正確に制御できるため、特定の要件に合わせて調整できます。さまざまなクリップパス値を試して、完璧な曲率を実現し、望ましい視覚的効果を実現します。

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