Wie erstelle ich einen transparenten Halbkreisausschnitt in einem Div nur mit CSS3?

Erstellen eines transparenten halbkreisförmigen Ausschnitts in einem Div mit CSS3

Zum Erstellen eines transparenten halbkreisförmigen Ausschnitts innerhalb eines Divs nur mit CSS3 , muss die Hintergrundfarbe aller Elemente, die die Form bilden, entweder schwarz oder transparent bleiben. Eine Technik, die diese Anforderung erfüllt, beinhaltet die Verwendung der CSS-Pseudoeigenschaft ::after.

Hier ist ein Beispiel, wie man den gewünschten Effekt erzielt:

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>

Dieser Ansatz erstellt ein Rechteck mit schwarzem Overlay und halbtransparentem Kreis. Der Kreis wird absolut positioniert, um eine transparente Ausschnittform zu erzeugen.

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