CSS のみを使用して透明なカットアウト円を作成するにはどうすればよいですか?

CSS で透明な切り抜き円を作成する

CSS では、実線の円を描くことは普遍的なタスクです。ただし、中空の円を切り出すことには独特の課題が伴います。これは CSS のみを使用して実現できますか?

可能性の探求

CSS を使用して塗りつぶされた円を簡単に作成できますが、透明性と中空の内部を実現するにはもう少し時間がかかります。

答え: 2 つの独創的テクニック

CSS で透明な切り抜き円を作成するには、主に 2 つのアプローチがあります。

1. SVG (Scalable Vector Graphics)

SVG を利用すると、XML ベースのマークアップを使用して形状を定義できます。 mask 要素を利用すると、透明な領域を切り取って中空の円を作成できます:

<svg viewbox="0 0 100 50" width="100%">
  <defs>
    <mask></mask></defs></svg>

2. Path 要素の使用

または、2 つの円弧を定義する path 要素を使用して中空の円を作成できます:

<svg width="100%" height="50">
  <path d="M 50,25 A 15,15 0 1 1 50,25 L 50,40 A 15,15 0 1 1 50,25" stroke="none" fill="#000000" fill-opacity="0.7"></path>
</svg>

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