Wie schneide ich nur mit CSS einen Kreis aus einem Rechteck aus?

Schneiden Sie in CSS einen Kreis aus einer rechteckigen Form aus

Ein Ansatz zum Erzeugen dieses Effekts ist die Verwendung einer Kombination von Elementen und einer cleveren Lösung Verwendung von border-radius. Diese Technik weist jedoch potenzielle Nachteile auf, wie z. B. unregelmäßiges Markup und eine unansehnliche Lücke in bestimmten Browsern.

Alternativer Ansatz

Glücklicherweise gibt es eine alternative Methode, die zum Einsatz kommt ein einzelnes Element zusammen mit einem Pseudoelement. Dieser Ansatz nutzt die Leistungsfähigkeit radial verlaufender Hintergründe für das übergeordnete Element, während das Pseudoelement als transparenter Kreisausschnitt dient.

Beachten Sie den folgenden Codeausschnitt:

div:before {
  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}
div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;  
  
  /* only the below creates the transparent gap and the fill */
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

Erläuterung

• Das div-Element definiert die rechteckige Form, komplett mit abgerundeten Ecken Ecken.
• Innerhalb des Div erstellt das Pseudoelement :before den kreisförmigen Ausschnitt mit absoluter Positionierung und einem durchgehenden roten Rand.
• Der transparente Lücken- und Fülleffekt wird durch die Anwendung eines Radials erreicht Farbverlaufshintergrund auf dem div-Element. Der Farbverlauf erzeugt einen transparenten Bereich in der Mitte, der sich mit dem Kreis des Pseudoelements überlappt, was zu einem Ausschnitteffekt führt.

Diese Technik bietet eine Reihe von Vorteilen:

• Es macht zusätzliche Elemente überflüssig und vereinfacht das Markup.
• Es funktioniert konsistent in allen Browsern, ohne dass es auffällt Artefakte.
• Der Kreis kann mithilfe einfacher Berechnungen genau innerhalb des Rechtecks ​​zentriert werden.

Durch die Implementierung dieses alternativen Ansatzes können Sie in CSS effektiv einen Kreis aus einer rechteckigen Form ausschneiden. Erreichen des gewünschten visuellen Ergebnisses ohne die Komplexität und Fallstricke früherer Methoden.

Das obige ist der detaillierte Inhalt vonWie schneide ich nur mit CSS einen Kreis aus einem Rechteck aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!