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

CSS を使用したシームレスな透明なカットアウトの作成

CSS3 のみを使用して div 内で透明なカットアウト形状を実現することは、特に形は単純な幾何学的図形ではありません。この記事では、::after 擬似プロパティを使用してシームレスな半円の切り抜きを作成し、すべての要素が黒または透明のままになるようにするソリューションを紹介します。

このアプローチには、透明な円を配置した黒い長方形を作成することが含まれます。それ。ただし、目的のカットアウト効果を実現するには、円の境界を越える透明な半径が必要です。これは、大きな境界線を持つ ::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);
}

このコードは、上半分に透明な半円の切り抜きを持つ黒い四角形を作成します。 ::after 疑似要素は、長方形の上に透明な円を配置し、幅の広い黒い境界線を適用して丸い形状を作成します。 ::after 要素の背景が透明なので、長方形の色と周囲の背景が透けて見えるようになり、シームレスな切り抜き効果が得られます。

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