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

CSS を使用した透明な半円の切り抜き

白い円のある黒い四角形がないにもかかわらず、透明な半分を作成することは可能です-CSS3のみを使用した円形の切り抜き。重要なのは、::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);
}

このコードでは、.rect 要素がメインの形状を表し、.circle とその ::after 擬似要素が一緒になってカットアウトを形成します。 。 ::after 要素は、.circle 要素の後ろに配置される半円の形状を作成し、半円の切り抜きの錯覚を作成します。 ::after 要素の背景が透明なので、背景色が透けて見え、目的の効果が得られます。

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