Wie erstelle ich mit CSS eine umgekehrte oder ausgeschnittene Kreisform?

CSS 3-Form: „Umgekehrter Kreis“ oder „Ausgeschnittener Kreis“

In CSS ist ein umgekehrter Kreis oder ausgeschnittener Kreis eine Form, die einem Kreis mit einem ähnelt Ausschnittabschnitt. Dies kann mit verschiedenen Techniken erreicht werden, aber zwei gängige Methoden umfassen:

Verwendung verschachtelter Elemente und absoluter Positionierung

Diese Methode beinhaltet die Erstellung zweier verschachtelter Elemente, eines inneren Kreises (#a), um den zu bilden massiver kreisförmiger Teil und eine äußere Form (#b), die einen negativen Z-Index enthält, um ihn hinter dem inneren Kreis zu positionieren. Die äußere Form verfügt über einen gekrümmten Ausschnitt, der durch CSS-Ränder und negative Ränder/Abstandsanpassungen erreicht wird.

Beispielcode:

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

Verwenden eines radialen Hintergrundverlaufs und einer absoluten Positionierung

Eine andere Methode besteht darin, einen Kreis mit einem radialen CSS3-Hintergrundverlauf zu erstellen und ein absolut positioniertes Div mit negativem Rand zu platzieren, um den Ausschneideeffekt zu erzeugen. Diese Option eignet sich für Browser, die radiale CSS-Verläufe unterstützen.

Beispielcode:

<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 */;
}

Diese Techniken bieten flexible Optionen zum Erstellen umgekehrter oder ausgeschnittener Kreise in CSS, ohne auf Bilder angewiesen zu sein. Die geeignete Wahl hängt von der Browserkompatibilität, den Designanforderungen und dem gewünschten Effekt ab.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS eine umgekehrte oder ausgeschnittene Kreisform?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!