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

Transparent Half-Circle Cutout using CSS

Despite the absence of a black rectangle with a white circle, it's possible to create a transparent half-circle cutout using solely CSS3. The key lies in employing the ::after pseudo property judiciously.

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

In this code, the .rect element represents the main shape, while the .circle and its ::after pseudo element together form the cutout. The ::after element creates a semi-circle shape that is positioned behind the .circle element, creating the illusion of a half-circle cutout. The transparent background of the ::after element allows the background color to show through, achieving the desired effect.

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