Bild schräg darstellen

[Achot]

Hallo,

auf der Seite http://freefrontend.com/css-timelines/ habe ich einen tollen Header gefunden, wo das Bild von oben rechts nach unten links etwas schräg dargestellt wird. Im Quelltext kann ich irgendwie nichts finden.

Kann mir jemand sagen, wie dieses realisiert wird?

[Matthias Apsel]

Hallo Achot,

falls es nicht schon im Original gedreht ist, transform: rotate().

Bis demnächst
Matthias

[MrMurphy1]

Hallo

Dafür gibt es verschiedene Möglichkeiten.

In dem Beispiel bekommt das dem div.header folgende Element div.content ein Pseudoelement :after, welches mittels position: absolute teilweise über dem div.header plaziert wird und mittels transform: skew schräg verzerrt wird.

Ich bezweifele aber dass das die sinnvollste Möglichkeit für den Effekt ist.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

In dem Beispiel bekommt das dem div.header folgende Element div.content ein Pseudoelement :after, welches mittels position: absolute teilweise über dem div.header plaziert wird und mittels transform: skew schräg verzerrt wird.

Ich bezweifele aber dass das die sinnvollste Möglichkeit für den Effekt ist.

Die Zweifel sind völlig angebracht. Wenn der Effekt zum div.header gehört (welches gerne ein header-Element wäre), dann sollte er mit einem Pseudoelement dieses Elements realisiert werden und nicht mit einem Pseudoelement für ein anderes Element div.content (welches gerne das main-Element wäre).

Die sinnvollste Möglichkeit ist aber nicht, die Ecke mit einem Pseudoelement abzudecken (was, wenn die Seite eine Hintergrundgrafik hat?), sondern die Ecke tatsächlich abzuschneiden: mit clip-path: polygon().

Das wird weitgehend unterstützt (Safari und Android mit Präfix). Im Firefox ist das noch hinter einem Flag versteckt, wird aber in Kürze auch für alle freigeschaltet. Firefox könnte es schon für alle mit SVG, aber das lohnt wohl den Aufwand nicht. (Außerdem fällt mir auf die Schnelle nicht ein, wie sich eine vorgegebene Neigung bei variabler Headerhöhe umsetzen ließe.)

Den Fallback mit dem Pseudoelement braucht man ja noch für Edge und IE (wenn es denn wichtig ist, deren Nutzern dasselbe Layout zu präsentieren). Das Pseudoelement in Brosern, die clip-path: polygon() unterstützen, aber unbedingt abschalten (mittels @supports()), denn transform: skew gibt eine leicht pixelige Kante, während clip-path: polygon() sich richtigen Anti-Aliasings erfreut.

☞ Beispiel mit 4% Steigung; den Steigungswinkel rechnet man sich über den Arcustangens aus.

(Statt transform: skew wäre auch ein Pseudoelement mit background: linear-gradient(to bottom right, transparent 50%, white 50%) denkbar. Allerdings ergibt das auch eine pixelige Kante. Die Breakpoints leicht zu verschieben führt zu einer unscharfen Kante; es ist reine Glückssache, den Wert so treffen, dass es Anti-Aliasing ähnlich sieht. Und das gilt dann auch nur für die jeweilige Viewportbreite.)

LLAP 🖖