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!