schräge Kanten mit CSS

[heinetz]

hello,

Was genau erschien dir?

Ich hatte ja auch gebastelt und mich zuerstmal darüber gefreut, dass meine Idee grundsätzlich funktioniert. Dann habe ich mit dem CSS herumprobiert um mal zu gucken was passiert wenn man das ein oder andere ändert. Klar, natürlich mit dem Ziel, dass ich hinterher sicher sagen bzw. ausrechnen kann, wie ich zu der gewünschten Darstellung komme. Und da bin ich dann irgendwann ausgestiegen.

Ich hab da mal was gebastelt. Die Maße der Blende sind die Mindestmaße; kannste gern etwas größer machen, <ins>um Rundungsfehler auszugleichen</ins>. Für andere Winkel entsprechend berechnen.

Dein Gebastel basiert auf einer ganz anderen Idee. Während ich versucht hatte das Bild und den Container zu drehen, hast Du das Bild mit einem anderen Container abgedeckt. Das funktioniert super!

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.

Diesen Artikel meines geschätzten Kollegen hast du gelesen?

Ja, hatte ich. Am Ende steht, dass es mit dem IE kompliziert wird. Dann hatte ich das hier, was eben garnicht so kompliziert aussieht und gut funktionierte.

Nun stehen also verschiedene Möglichkeiten im Raum, die Schrägen in meinem Layout zu konstruieren, die gegeneinander abzuwägen sind. Der eine Ansatz ist, Schrägen zu erzeugen, indem man was abdeckt. Das scheint mir, relativ gut, weil rein mit CSS, machbar. Treppchen sieht man aber in jedem Fall. Bei dem Ansatz clip-path/svg sieht man meinem Eindruck nach keine Treppchen. Dafür ist er mit sehr viel mehr Aufwand verbunden.

gruss, heinetz