Pfeilförmige Elemente mit CSS 3 – geht nicht gibt’s nicht!

Vor einigen Tagen diskutierte ich mit einem Kollegen über die Machbarkeit von pfeilförmigen Produkt-Teasern nur mit CSS. Herausforderung angenommen, geht! Zwar können die alten Bekannten der Browser-Szene natürlich nichts mit dem Code anfangen, aber darum geht es hier nicht.

Es hat mich einige Flüche gekostet, aber nun kann ich behaupten: „Man kann pfeilförmige Elemente mit CSS 3 erstellen!“ Wer es nicht glaubt darf gerne der Code der Beispielseite mit Firebug durchforsten.

Den Schlüssel zum Erfolg fand ich auf dieser Seite The CSS3 matrix() Transform for the Mathematically Challenged. Die CSS Eigenschaft Transform mit der Transformationsfunktion matrix() ist zwar nicht unbedingt selbsterklärend, wer jedoch in Mathe wenigstens ein paar Mal aufgepasst hat kriegt den Bogen schnell raus.

Die HTML-Zeilen für die Pfeilespitze sind absolut simpel

Hier die entsprechenden Zeilen CSS

Die Transformation formt aus einem Quadrat eine Raute von der nur die untere Hälfte angezeigt wird.

Setzt man die halbierte Raute nun unter ein Rechteck mit der exakt gleichen Breite und passt Farben oder Verläufe an, so erhält man pfeilförmige Elemente mit CSS3.

Chrome, Firefox und Safari der neusten Generation kommen mit dieser Transformation klar und zeigen die Elemente richtig an, andere Browser, insbesondere IE, habe ich nicht getestet.

 

Alexander Schramm

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.