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

Creating Seamless Transparent Cutouts with CSS

Achieving a transparent cut out shape in a div using only CSS3 can be a challenge, especially when the shape is not a simple geometric figure. This article presents a solution that employs the ::after pseudo property to create a seamless half circle cutout, ensuring that all elements remain either black or transparent.

The approach involves creating a black rectangle with a transparent circle placed over it. However, to achieve the desired cutout effect, the circle requires a transparent radius extending beyond its boundaries. This is achieved by using the ::after pseudo element with a large border to create the half circle shape.

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

This code creates a black rectangle with a transparent half circle cutout on the top half. The ::after pseudo element positions a transparent circle above the rectangle and applies a wide black border to create the rounded shape. The transparent background of the ::after element allows the rectangle's color and surrounding background to show through, resulting in the seamless cutout effect.

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