schräge Kanten mit CSS

[heinetz]

Hallo Forum,

ich will ein Layout mit Bootstrap umsetzen, dass schräge Kanten enthält.

So sieht's aus:

Es gibt also ein Bild und ansonsten Boxen, deren Kanten schräg abgeschnitten sind. Der Platz neben bzw. der Schrägen enthält keinen Content ausser bei dem Bild (eben das Bild). Aus CSS 2 ist mir die Technik über geläufig, wo man den Umstand ausnutzt, dass die Stosskanten von Borders schräge dargestellt werden. Das ist aber gerne mal pixelig und funktioniert afaik nicht mit Grafiken. Mit CSS 3 habe ich eben mal mit rotateZ rumprobiert, was grundsätzlich funktioniert, mir aber recht schwer beherrschbar erschien. In dem Zusammenhang habe ich dann clip-path gefunden. Die alte CSS 2-Einschaft 'Clip' hatte ich als Praktikant mal entdeckt und geliebt, irgendwann aber nicht mehr verwendet. Nun gut, mit Clip-path hat man das also für CSS3 weiterentwickelt. Dann wird's wohl seinen Sinn haben. Von der Bedienung her würde ich sagen, es ist genau das, was ich benötige. Aber der IE ist damit ganz raus, ausser man macht das mit SVG. Aha! Obwohl das garnicht so kompliziert aussieht, habe ich damit nun garkeine Erfahrung.

Welche Technik bietet sich an, um die Schrägen zu realisieren?

danke für Tipps und

beste grüsse, heinetz