How Can I Create a Circular Cutout in a Rectangle Using Only CSS?

Creating a Circular Cutout from a Rectangular Shape using CSS

The question posed seeks an alternative approach to achieving a circular cutout within a rectangular shape. The initial solution used a combination of elements and borders, resulting in a satisfactory effect but lacking clean markup and encountering a bug in certain browsers.

Alternative Method

A more elegant solution involves utilizing a single element (along with a pseudo-element) and employing radial-gradient backgrounds. Here's the revised CSS:

div:before {
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;
  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;
  
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

Explanation

• The pseudo-element (:before) creates a circular red cutout with dimensions of 90px and positions it inside the parent element.
• The parent element has a transparent radial gradient that fills the remaining area, creating the rectangular shape with the cutout.
• The radius of the transparent gradient is slightly larger than the radius of the cutout, allowing for a thin transparent gap around the edges.
• The centering of the circle and the transparent gap is controlled through the placement of the radial gradient's center point.

This updated method addresses both the clean markup concerns and the browser bug encountered in the initial solution. It provides a seamless and visually pleasing circular cutout from a rectangular shape using only CSS.

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