How to Create an Inverse or Cutout Circle Shape Using CSS?

CSS 3 Shape: "Inverse Circle" or "Cut Out Circle"

In CSS, an inverse circle or cutout circle is a shape that resembles a circle with a cutout section. It can be achieved using various techniques, but two common methods include:

Using Nested Elements and Absolute Positioning

This method involves creating two nested elements, an inner circle (#a) to form the solid circular portion, and an outer shape (#b) that contains a negative z-index to position it behind the inner circle. The outer shape has a curved cutout section achieved through CSS borders and negative margins/padding adjustments.

Example Code:

<div>

.inversePair {
  border: 1px solid black;
  background: grey;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
}

#a:before {
  content: ' ';
  left: -6px;
  top: -6px;
  position: absolute;
  z-index: -1;
  width: 112px;
  height: 112px;
  border-radius: 56px;
  background-color: white;
}

#b {
  width: 200px;
  z-index: -2;
  padding-left: 50px;
  margin-left: -55px;
  overflow: hidden;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#b:before {
  content: ' ';
  left: -58px;
  top: -7px;
  position: absolute;
  width: 114px;
  height: 114px;
  border-radius: 57px;
  background-color: black;
}

Using Radial Background Gradient and Absolute Positioning

Another method involves creating a circle using CSS3 radial background gradient and placing a negative margin absolute positioned div to create the cut out effect. This option is suitable for browsers supporting CSS radial gradient.

Example Code:

<div>

.inversePair {
  border: 1px solid black;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
  background: grey;
  z-index: 1;
}

#b {
  width: 200px;
  padding-left: 30px;
  margin-left: -30px;
  border-left: none;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: /* radial-gradient syntax for various browsers */;
}

These techniques provide flexible options to create inverse or cutout circles in CSS without relying on images. The appropriate choice depends on browser compatibility, design requirements, and desired effect.

The above is the detailed content of How to Create an Inverse or Cutout Circle Shape Using CSS?. For more information, please follow other related articles on the PHP Chinese website!