Wie kann ich einen transparenten Halbkreisausschnitt nur mit CSS3 erstellen?

Erstellen eines transparenten Halbkreisausschnitts mit CSS3

Um die gewünschte transparente Halbkreisform zu erreichen, bei der alle Elemente schwarz oder transparent bleiben , eine Technik, die die CSS-Pseudoeigenschaft ::after verwendet, kann verwendet werden.

Der Trick liegt in der cleveren Kombination eines schwarzen Rechtecks ​​und eines Kreises. Das Rechteck dient als Basis und bildet den schwarzen Hintergrund. Darüber wird mithilfe der Überlaufeigenschaft ein Kreis absolut und teilweise ausgeblendet positioniert.

Der Schlüssel zu dieser Technik ist das dem Kreis hinzugefügte Pseudoelement ::after. Mit einer Breite und Höhe von 100 Pixeln bildet es einen perfekten Halbkreis. Es wird ein 40 Pixel dicker Rand angewendet, der Hintergrund bleibt jedoch transparent.

Durch Anpassen der Position des Pseudoelements ::after kann der Halbkreis nach oben verschoben werden, um ihn an der Kante des Rechtecks ​​auszurichten und so ein Rechteck zu erstellen die Illusion eines Ausschnitts.

Hier ist ein Beispielcode, der diese Technik demonstriert:

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

<div class="rect">
  <span class="circle"></span>
</div>

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