Home > Web Front-end > CSS Tutorial > How to Create an Inverse or Cutout Circle Shape Using CSS?

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

DDD
Release: 2024-12-31 17:38:10
Original
849 people have browsed it

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>
Copy after login
Copy after login
.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;
}
Copy after login

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>
Copy after login
Copy after login
.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 */;
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template