Wie kann ich mit reinem CSS abgewinkelte Ecken mit beibehaltenen Rändern erstellen?

CSS-Winkelecken: Ein tiefer Einblick

Winkelecken mit reinem CSS zu erstellen, kann eine herausfordernde Aufgabe sein, insbesondere wenn es um die Erhaltung geht Grenze. Durch sorgfältige Manipulation der :before- und :after-Elemente ist es jedoch möglich, eine gute Annäherung zu erreichen.

Schritt 1: Container mit Rand

Beginnen Sie mit dem Hinzufügen von a Rand zum Behälter, der die gewünschte abgewinkelte Form hat.

Schritt 2: :vorher für Ecke Blackout

Als nächstes erstellen Sie ein :before-Element, um eine bestimmte Ecke auszublenden. Um sicherzustellen, dass es den Rand abdeckt, versetzen Sie es um -1 Pixel.

Schritt 3: :danach für die innere Linie

Für die abgewinkelte Linie innerhalb der abgeschnittenen Ecke: Führen Sie ein :after-Element ein. Versetzen Sie dies leicht vom :before-Element.

Beispielcode:

.cutCorner {
  position: relative;
  background-color: blue;
  border: 1px solid silver;
  display: inline-block;
}
.cutCorner img {
  display: block;
}
.cutCorner:before {
  position: absolute;
  left: -1px;
  top: -1px;
  content: '';
  border-top: 70px solid silver;
  border-right: 70px solid transparent;
}
.cutCorner:after {
  position: absolute;
  left: -2px;
  top: -2px;
  content: '';
  border-top: 70px solid white;
  border-right: 70px solid transparent;
}

Wie in der Lösung angegeben, kann die Dicke der 45-Grad-Linie beibehalten werden ein Problem. Dieser Ansatz bietet jedoch eine praktikable Lösung zum Erstellen abgewinkelter Ecken mit Rand.

Das obige ist der detaillierte Inhalt vonWie kann ich mit reinem CSS abgewinkelte Ecken mit beibehaltenen Rändern erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!