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

CSS3 で透明な半円のカットアウトを作成する

すべての要素が黒または透明のままで、目的の透明な半円の形状を実現するには、CSS ::after 擬似プロパティを利用する手法を使用できます。

そのコツは次のとおりです。黒い長方形と円の賢い組み合わせ。長方形はベースとして機能し、黒い背景を提供します。この上に、オーバーフロー プロパティを使用して円が完全に部分的に非表示に配置されます。

この手法の鍵となるのは、円に追加される ::after 疑似要素です。幅と高さを 100px に設定すると、完全な半円が形成されます。 40 ピクセルの太さの境界線が適用されますが、背景は透明のままです。

::after 疑似要素の位置を調整することで、半円を上に移動して長方形の端に揃えることができ、カットアウトの錯覚です。

これを示すコード例を次に示します。テクニック:

body {
  background: green;
}

.rect {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.circle {
  display: block;
  width: 100px;
  height: 50px;
  top: -50px;
  left: 0;
  overflow: hidden;
  position: absolute;
}

.circle::after {
  content: '';
  width: 100px;
  height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: -100px;
  left: -40px;
  border: 40px solid rgba(0, 0, 0, 0.5);
}

<div class="rect">
  <span class="circle"></span>
</div>

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