Wie kann ich abgewinkelte Ecken in CSS erstellen, indem ich nur :before- und :after-Pseudoelemente verwende?

Abgewinkelte Ecken in CSS: Eine detaillierte Lösung

Das Erstellen abgewinkelter Ecken mit reinem CSS ist möglich, birgt jedoch gewisse Herausforderungen. Um dies zu erreichen, ist es notwendig, :before- und :after-Elemente innerhalb eines übergeordneten Containers zu verwenden, der einen Rahmen hat.

1. Fügen Sie dem Container einen Rahmen hinzu: Richten Sie einen Rahmen um den ein Containerelement, um die sichtbare Grenze zu definieren.
2. Erstellen Sie ein :before-Element, um eine Ecke zu blockieren: Fügen Sie ein hinzu :before-Element mit einem in Pixel angegebenen Rahmenstil, um eine durchgezogene senkrechte Linie zu erstellen. Versetzen Sie dieses Element um -1 Pixel, um den Rand des Containers zu berücksichtigen.
3. Fügen Sie ein :after-Element hinzu, um eine innere Linie zu erstellen:Fügen Sie ein :after-Element mit einem etwas kleineren Versatz als ein das :before-Element. Stellen Sie den oberen Randstil des :after-Elements auf eine andere Farbe ein, z. B. Weiß, um eine kontrastierende Linie innerhalb des abgeschnittenen Bereichs zu erzeugen.

Obwohl diese Technik dem gewünschten Effekt nahe kommt, ist sie kann zu einem kleinen Problem mit der Dicke der 45-Grad-Linie führen.

Beispiel Code:

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

<div class="cutCorner">
    <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

Das obige ist der detaillierte Inhalt vonWie kann ich abgewinkelte Ecken in CSS erstellen, indem ich nur :before- und :after-Pseudoelemente verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!