schräge Kanten mit CSS bearbeitet von Gunnar Bittersmann 13.01.2016 06:17 @@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 Box 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 🖖-- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)
schräge Kanten mit CSS bearbeitet von Gunnar Bittersmann 13.01.2016 10:43 @@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 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 Box 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 🖖-- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)
schräge Kanten mit CSS bearbeitet von Gunnar Bittersmann 13.01.2016 06:42 @@heinetz > 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 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 Box 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 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)
nicht angemeldet
