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

Cut a Circular Hole in a Rectangular Shape with CSS

In the pursuit of a specific visual effect, many developers encounter challenges with markup and compatibility issues, particularly when attempting to create a circular cutout within a rectangular shape using CSS.

To address these concerns and enhance the understanding of CSS techniques, let's explore an alternative approach to achieve the desired result. By utilizing a radial-gradient background on the parent element and a pseudo-element for the circular cutout, we can simplify the markup and eliminate the 1px gap issue in IE 10/11.

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

The pseudo-element, represented by :before, defines the red circular cutout. It is absolutely positioned and centered horizontally within the parent div, reflecting the circular hole we aim to achieve. The background-color and border-radius properties set its visual appearance.

The parent div is positioned relatively to contain the cutout and provides the rectangular background. The border-radius rounds its corners, creating a smooth transition between the cutout and the rectangle.

The radial-gradient background on the parent div is crucial for achieving the transparent gap and filling effect. The radial gradient starts from the center point of the circle (50px 50px at 50% -30px) and expands outwards, creating a soft transition from transparent to semi-transparent black. By carefully adjusting the radius of the gradient, we create the illusion of a circular hole cut into the rectangle.

This approach offers a simpler markup compared to using multiple elements and eliminates the 1px gap issue experienced in IE 10/11. It relies solely on CSS properties to achieve the desired visual effect, enhancing maintainability and cross-browser compatibility.

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