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

CSS を使用した 2 つの丸い側面を持つ透明な曲線形状の作成

透明な内側の曲線形状を作成しようとすると、達成するのが困難に直面しました。希望通りの透明感。この質問は、CSS での透明な曲線形状作成テクニックを理解する必要性を強調しています。

放射状グラデーションを使用した解決策

この形状を作成する 1 つのアプローチには、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);
}

このコードでは、2 つの :before および :after 擬似要素が作成されて、形状の丸い側面。放射状のグラデーションにより、透明な領域と不透明な領域の間で徐々に変化し、湾曲した形状のような錯覚を生み出すことができます。

SVG を使用した代替ソリューション

また、次のこともできます。 SVG (Scalable Vector Graphics) を利用して曲線を定義します。 shape:

<svg width="200" height="100" viewBox="0 0 200 100">
  <defs>
    <mask>

この SVG コードでは、シェイプを作成するためにパスが定義され、シェイプの必要な部分のみを表示するためにマスクが長方形に適用されます。

結論

CSS 放射状グラデーションまたは SVG を活用することで、目的の透明な内側の曲線形状を実現できます。 2つの丸い側面。これらのアプローチのどちらを選択するかは、好みの方法と設計の複雑さによって異なります。

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