Wie kann ich in CSS abgewinkelte Ecken erstellen, ohne SVG oder Canvas zu verwenden?

Abgewinkelte Ecken in CSS: Eine hochmoderne Technik

Das Entwerfen einer ästhetisch ansprechenden Website kann eine Herausforderung sein, insbesondere wenn es darum geht, abgewinkelte Ecken zu erstellen Ecken. Dank der Fortschritte in CSS ist es nun jedoch möglich, diesen Effekt zu erzielen, ohne auf nicht-native Methoden wie SVG oder Canvas zurückgreifen zu müssen.

Erstellen der abgewinkelten Ecke

Zu Wenn wir eine abgewinkelte Ecke erstellen, können wir die Pseudoelemente „:before“ und „:after“ zusammen mit einem übergeordneten Container nutzen. Indem wir die Position, Rahmenstile und Versätze dieser Elemente manipulieren, können wir eine Ecke effektiv ausblenden und gleichzeitig den Rand beibehalten.

Schritt 1: Containerrand

Beginnen indem Sie dem Containerelement einen Rahmen hinzufügen, um die äußeren Grenzen unserer abgewinkelten Ecke zu definieren.

Schritt 2: :vorher Pseudoelement

Fügen Sie als Nächstes das Pseudoelement :before hinzu, um die gewünschte Ecke abzuschneiden. Positionieren Sie es absolut, mit einem negativen Versatz von -1 Pixel, um den Rand abzudecken. Tragen Sie oben einen festen Rand und rechts einen transparenten Rand auf, um die schräge Linie zu erstellen.

Schritt 3: :nach Pseudo-Element

So erstellen Sie die Linie Fügen Sie innerhalb des Cut-Offs das :after-Pseudoelement mit einem etwas kleineren Offset von -2px hinzu. Geben Sie ihm oben einen durchgehenden weißen Rand und rechts einen transparenten Rand.

Beispielimplementierung

Der folgende CSS-Code zeigt, wie diese Prinzipien angewendet werden:

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

Dieser Code kann verwendet werden, um ein Bildelement in einen Container einzuschließen, was zu einem Bild mit dem angegebenen Winkel führt Ecke.

Alternativer Ansatz

Während CSS-Techniken eine Lösung bieten können, wenn eine präzise Kontrolle über die abgewinkelte Ecke erforderlich ist oder zusätzliche Funktionen wie Maskierung oder Bildausschnitt gewünscht sind, Die Verwendung von SVG oder Canvas ist möglicherweise ein geeigneterer Ansatz.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS abgewinkelte Ecken erstellen, ohne SVG oder Canvas zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!