schräge Kanten mit CSS

[Gunnar Bittersmann]

@@heinetz

Richtig, so soll das sein. Un so könnte man das machen …

(Könnte man?)

Mit dem jetzt ergänzten Vendor-Präfix für WebKit, ja.

In Deiner Lösung mit der rotierten Box scheinen die Werte nicht von einer festen Bildgrösse abgeleitet zu sein.

Richtig, da spielt allein der Winkel rein, den die Schräge haben soll. In meinen Beispielen 6°.

Dass die Höhe des Bildes keine Rolle spielt, liegt daran, dass die Höhe der Box des Pseudoelements als Prozentwert der Breite berechnet wird (weil sich eine Prozentangabe für padding-top und padding-bottom auf die Breite des umschließenden Blocks bezieht; height ist auf 0 gesetzt).

In Der SVG-Lösung hingegen schon.

Da sich die x-Koordinaten bei clipPathUnits="objectBoundingBox" auf die Breite; die y-Koordinaten aber auf die Höhe des Blocks beziehen, spielt hier noch das Seitenverhältnis des Bildes mit rein. In dem Beispiel 800/600. (Nicht die „feste Bildgrösse“; ich hätte dafür auch 4/3 schreiben können.)

Funktioniert denn das auch mit einem Bild, bzw. einer Box dass/die 100% breit ist?

Wie du dem Quelltext unschwer entnehmen kannst, hat mein Bild eine Breite von 100%.

Das siehst du, wenn du die Viewportgröße änderst: entweder die Größe des Browserfensters oder die des Iframes – hier ziehen:

LLAP 🖖