Wie kann ich nur mit CSS einen kreisförmigen Ausschnitt in einem Rechteck erstellen?

Erstellen eines kreisförmigen Ausschnitts aus einer rechteckigen Form mit CSS

Die gestellte Frage sucht nach einem alternativen Ansatz zum Erreichen eines kreisförmigen Ausschnitts innerhalb einer rechteckigen Form . Die ursprüngliche Lösung verwendete eine Kombination aus Elementen und Rahmen, was zu einem zufriedenstellenden Effekt führte, aber es mangelte an sauberem Markup und es trat in bestimmten Browsern ein Fehler auf.

Alternative Methode

Ein weiteres Eine elegante Lösung besteht darin, ein einzelnes Element (zusammen mit einem Pseudoelement) zu verwenden und radial verlaufende Hintergründe zu verwenden. Hier ist das überarbeitete CSS:

div:before {
  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;
  
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

Erklärung

• Das Pseudoelement (:before) erstellt einen kreisförmigen roten Ausschnitt mit den Abmessungen 90 Pixel und positioniert ihn innerhalb des übergeordneten Elements.
• Das übergeordnete Element verfügt über einen transparenten radialen Farbverlauf, der den verbleibenden Bereich ausfüllt und die rechteckige Form mit dem erzeugt Ausschnitt.
• Der Radius des transparenten Farbverlaufs ist etwas größer als der Radius des Ausschnitts, sodass an den Rändern ein dünner transparenter Spalt entsteht.
• Die Zentrierung des Kreises und des transparenten Spalts ist wird durch die Platzierung des Mittelpunkts des radialen Farbverlaufs gesteuert.

Diese aktualisierte Methode behebt sowohl die Bedenken hinsichtlich der sauberen Markierung als auch den Browserfehler, der in der ursprünglichen Lösung aufgetreten ist. Es bietet einen nahtlosen und optisch ansprechenden kreisförmigen Ausschnitt aus einer rechteckigen Form nur mit CSS.

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