How Can I Create a Transparent Half-Circle Cutout Using Only CSS3?

Creating a Transparent Half-Circle Cutout with CSS3

To achieve the desired transparent half-circle shape, where all elements remain black or transparent, a technique utilizing the CSS ::after pseudo property can be employed.

The trick lies in the clever combination of a black rectangle and a circle. The rectangle serves as the base, providing the black background. Over this, a circle is positioned absolutely and partially hidden using the overflow property.

Key to this technique is the ::after pseudo element added to the circle. With its width and height set to 100px, it forms a perfect semi-circle. A 40px-thick border is applied, but the background remains transparent.

By adjusting the position of the ::after pseudo element, the semi-circle can be shifted upwards to align with the edge of the rectangle, creating the illusion of a cut-out.

Here's an example code that demonstrates this technique:

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>

The above is the detailed content of How Can I Create a Transparent Half-Circle Cutout Using Only CSS3?. For more information, please follow other related articles on the PHP Chinese website!