CSS を使用して側面が丸い透明な曲線形状を作成するにはどうすればよいですか?

CSS で側面が丸い透明な曲線形状を作成する

CSS で曲線形状を作成することは、特に透明性を目指す場合には困難になることがあります。この記事では、CSS を使用してこれを実現し、不透明な背景の問題に対処する方法を検討します。

課題:

次のようなシナリオに遭遇するかもしれません。提供された画像に示されているものと同様の透明な曲線形状を作成します。ただし、従来の CSS 技術を使用した現在のアプローチでは、結果のスクリーンショットに見られるように、背景が不透明になります。

解決策:

この問題を解決するには、次のことを行います。放射状勾配を含むソリューション。戦略的に配置された 2 つの放射状グラデーションを利用することで、丸い側面を持つ透明な曲線形状の錯覚を作り出すことができます。

実装:

.box {
  margin-top:120px;
  width:200px;
  height:100px;
  background:white;
}

.box .top {
  height:100px;
  width:150px;
  transform:translateY(-100%);
  position:relative;
  background:#fff;
}

.top:before,
.top:after{
  content:"";
  position:absolute;
  top:0;
  width:50px;
  left:100%;
  bottom:50%;
  background:
    radial-gradient(100% 50% at top left, #fff 98%,transparent 100%) right,
    radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) left;
  background-size:50% 100%;
  background-repeat:no-repeat;
}

.top:after {
  transform-origin:bottom;
  transform:scaleY(-1);
}

body {
  background:pink;
}

このコード スニペットでは、「.top」要素は湾曲した形状を表します。この要素の前後に配置された放射状グラデーションは、丸い側面と透明度を作成します。 「transform:scaleY(-1)」プロパティは、after 疑似要素を垂直方向に反転し、対称的な形状を作成します。

実装の改善:

より多くのユーザー向けにカーブを調整するフレンドリーな方法については、https://css-shape.com/inner-curve/ で提供されるソリューションの使用を検討してください。この Web サイトでは、曲線形状のさまざまな側面をカスタマイズして、目的の効果を簡単に実現できます。

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