Wie erstelle ich mit CSS3 eine umgekehrte Kreisform?

CSS 3-Form: Inverser Kreis oder ausgeschnittener Kreis

Frage:

Wie kann ich einen „inversen Kreis“ erstellen? "Form, bei der der äußere Rand des Behälters kreisförmig ausgeschnitten ist und ein ausgefüllter Kreis übrig bleibt Mitte?

Antwort:

CSS3-Option für radialen Hintergrundverlauf

(Für moderne Browser wie Firefox, Chrome, Safari, und IE10)

Diese verbesserte Lösung ermöglicht eine transparente „Lücke“ zwischen dem Kreis und seiner Umkehrung Ausschnitt:

CSS:

.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;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: -moz-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
  background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

Originalantwort:

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

Beide Lösungen führen zu ein optisch ansprechender „umgekehrter Kreis“-Effekt, der die gewünschte Form erreicht, ohne dass Bilder erforderlich sind.

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