Wie kann ich einen nahtlosen halbkreisförmigen Ausschnitt nur mit CSS erstellen?

Nahtlose transparente Ausschnitte mit CSS erstellen

Eine transparente Ausschnittform in einem Div nur mit CSS3 zu erreichen, kann eine Herausforderung sein, insbesondere wenn die Form ist keine einfache geometrische Figur. Dieser Artikel stellt eine Lösung vor, die die Pseudoeigenschaft ::after verwendet, um einen nahtlosen Halbkreisausschnitt zu erstellen und sicherzustellen, dass alle Elemente entweder schwarz oder transparent bleiben.

Der Ansatz besteht darin, ein schwarzes Rechteck mit einem darüber platzierten transparenten Kreis zu erstellen Es. Um jedoch den gewünschten Ausschnitteffekt zu erzielen, benötigt der Kreis einen transparenten Radius, der über seine Grenzen hinausgeht. Dies wird erreicht, indem das Pseudoelement ::after mit einem großen Rand verwendet wird, um die Halbkreisform zu erstellen.

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

Dieser Code erstellt ein schwarzes Rechteck mit einem transparenten Halbkreisausschnitt in der oberen Hälfte. Das Pseudoelement ::after positioniert einen transparenten Kreis über dem Rechteck und wendet einen breiten schwarzen Rand an, um die abgerundete Form zu erzeugen. Der transparente Hintergrund des ::after-Elements lässt die Farbe des Rechtecks ​​und den umgebenden Hintergrund durchscheinen, was zu einem nahtlosen Ausschnitteffekt führt.

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