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

CSS を使用して側面が丸い透明な曲線形状を作成する方法

Web 開発では、視覚的に魅力的で機能的な要素を作成することが重要です。メニューやその他の UI 要素で使用される一般的な形状は、2 つの丸い側面を持つ湾曲した形状です。ただし、この透明な形状を実現するのは難しい場合があります。

挑戦

透明な内側の曲線形状を作成しようとしていますが、透明な形状をレンダリングするのが困難に直面しています。背景。目指している形状は、https://i.sstatic.net/LFEA9.png に示されている画像に似ています。

前の解決策

最初に試したのは、 CSS を使用して形状を作成しましたが、背景は不透明のままで、下にあるページのコンテンツが見えにくくなってしまいました。使用したコードは次のとおりです:

.tab-indicator {
  background-color: #000000;
  border-radius: 50px 0 0 50px;
  ...
}

改善されたソリューション

丸い側面を持つ透明な曲面形状を作成するには、https:/ で提供される更新されたソリューションを利用できます。 /css-shape.com/inner-curve/。このソリューションは、さまざまなパラメーターを微調整して目的の形状を生成できる、カスタマイズ可能な CSS ジェネレーターを提供します。

代替アプローチ

別のアプローチには、放射状グラデーションを使用して、同様の効果を実現します:

.top:before,
.top:after {
  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;
  ...
}

このテクニックは、交差する放射状のグラデーションを生成し、次のような錯覚を作り出します。透明な曲線形状。

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