Wie kann ich einen transparenten Halbkreisausschnitt nur mit CSS erstellen?

Transparenter Halbkreisausschnitt mit CSS

Obwohl kein schwarzes Rechteck mit weißem Kreis vorhanden ist, ist es möglich, eine transparente Hälfte zu erstellen -Kreisausschnitt ausschließlich mit CSS3. Der Schlüssel liegt darin, die Pseudoeigenschaft ::after mit Bedacht einzusetzen.

body {
  background: green;
}

.rect {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.circle {
  display: block;
  width: 100px;
  height: 50px;
  top: -50px;
  left: 0;
  overflow: hidden;
  position: absolute;
}

.circle::after {
  content: '';
  width: 100px;
  height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: -100px;
  left: -40px;
  border: 40px solid rgba(0, 0, 0, 0.5);
}

In diesem Code stellt das .rect-Element die Hauptform dar, während .circle und sein Pseudoelement ::after zusammen den Ausschnitt bilden . Das ::after-Element erstellt eine Halbkreisform, die hinter dem .circle-Element positioniert wird und die Illusion eines halbkreisförmigen Ausschnitts erzeugt. Der transparente Hintergrund des ::after-Elements lässt die Hintergrundfarbe durchscheinen und erzielt so den gewünschten Effekt.

Das obige ist der detaillierte Inhalt vonWie kann ich einen transparenten Halbkreisausschnitt nur mit CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!