Wie kann ich mit CSS abgewinkelte Ecken erstellen und einen Rand beibehalten?

Abgewinkelte Ecken mit CSS erstellen

Viele streben danach, komplexe Designs mit CSS zu erstellen, und das Erstellen einer abgewinkelten Ecke ist ein solches Unterfangen. Man könnte sich fragen, ob es möglich ist, ein Bild innerhalb einer solchen Form zuzuschneiden, ähnlich wie bei der Verwendung einer Maske, die gleichzeitig den grauen Rand beibehält.

Man kann für diese Aufgabe die Verwendung von Canvas oder SVG in Betracht ziehen. Es ist jedoch möglich, mit reinem CSS einen ähnlichen Effekt zu erzielen, indem Sie :before- und :after-Elemente innerhalb eines übergeordneten Containers verwenden.

Zuerst weisen Sie dem übergeordneten Container einen Rahmen zu. Fügen Sie dann ein :before-Element hinzu, um eine Ecke auszublenden, und versetzen Sie sie um -1 Pixel, um den Rand abzudecken. Fügen Sie abschließend ein :after-Element mit einem leichten Versatz zum :before ein, um die innere Linie der Abschneidelinie zu erstellen.

Trotz dieser Methode bleibt die Aufrechterhaltung der Dicke der 45-Grad-Linie eine leichte Herausforderung.

Bedenken Sie den folgenden CSS- und HTML-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>

Dieser Ansatz nähert sich der gewünschten abgewinkelten Ecke an die Grenze bewahren.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS abgewinkelte Ecken erstellen und einen Rand beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!