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

Div での透明な半円のカットアウトの作成

問題ステートメント:

CSS3 のみを使用して div 内で透明な半円形状のカットアウトを実現します。形状を形成するすべての要素が黒または透明でなければならないという制約があります。

解決策:

目的の形状を作成するには、次の ::after 擬似プロパティを利用します。 CSS:

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);
}

HTML:

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

このソリューションは円を含む正三角形を上に押し上げて、交点が半円形になるようにしたもの。背景のプロパティを黒または透明に設定すると、目的の効果が得られます。

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