How Can I Efficiently Cut a Circle Out of a Rectangle Using CSS?

Using CSS to Cut a Circle Out of a Rectangular Shape

The challenge of creating a transparent circle cut out from a rectangular shape has sparked discussion online. While some solutions exist, there are limitations and bugs that have left users searching for alternatives.

Alternative Approach Using Radial Gradient

One alternative approach to the initial solution lies in using a radial gradient on the parent element. This gradient creates the circular shape, while a pseudo-element is used to define the actual circle. This simplified markup eliminates the need for multiple divs and addresses the bug associated with IE 10/11.

div:before {  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;  /* top = -75px, radius = 45px, so circle's center point is at -30px */
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}
div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;  
  
  /* only the below creates the transparent gap and the fill */
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);  /* use same center point as with concentric circles but larger radius */
}

By utilizing this radial gradient approach, you can effectively cut out a circle from a rectangular shape, avoiding the limitations of previous solutions and ensuring compatibility across different browsers.

The above is the detailed content of How Can I Efficiently Cut a Circle Out of a Rectangle Using CSS?. For more information, please follow other related articles on the PHP Chinese website!