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

Erstellen eines transparenten Halbkreisausschnitts in einem Div

Problemstellung:

Erzielen eines transparenten halbkreisförmigen Ausschnitts innerhalb eines Divs nur mit CSS3, mit der Einschränkung, dass alle Elemente, die die Form bilden, entweder schwarz oder schwarz sein müssen transparent.

Lösung:

Um die gewünschte Form zu erstellen, verwenden wir die Pseudoeigenschaft ::after von CSS:

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

HTML :

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

Diese Lösung erzeugt ein gleichseitiges Dreieck, das einen Kreis enthält, der nach oben gedrückt wird, sodass der Schnittpunkt einen Halbkreis bildet Form. Indem wir die Hintergrundeigenschaften auf Schwarz oder Transparent einstellen, erzielen wir den gewünschten Effekt.

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