Hallo,

Dreiecke kann man erzeugen, indem man mit bestimmten Zeichen arbeitet, die allerdings nicht immer korrekt dargestellt werden. Mit utf-8 ist das recht einfach, man kann auch eine kleine icon-Font erzeugen und mit CSS3 text-shadow nette Effekte zaubern.

Effekte mit text-shadow

Diese eignen sich auch im kleineren Format für die Navigation oder zum umblättern (pagination).

• Demo und Quellcode ansehen

Einfache Pfeile kann man erzeugen, indem man ein DIV-tag in sehr geringer Grösse mit einem überdimensionierten Rand erstellt.

das DIV-Tag mit gestrichelter Linie dargestellt.

• Pfeile mit border

Das funktioniert natürlich nur bei einfarbigen Hintergründen, wer höhere Ansprüche hat, erzeugt einen quadratischen DIV-container und dreht den dann entsprechend mit transform:rotate, was allerdings nur von modernen browsern unterstützt wird und relativ viel Code benötigt. Für Seiten, die eine sehr schnelle Ladezeit erfordern, z.b. für mobile, ist diese Praxis heute noch ungeeignet !

ein gedrehtes Quadrat

Das wird dann in einem weiteren DIV-container eingebaut, welcher mit overflow:hidden das Kind-Element versteckt.

2 Dreiecke "Pfeile" für das Umblättern

• Demo und Quellcode ansehen

um experimentieren eignet sich der CSS3-box-generator zusammen am besten mit Chrome 28+ mit dem man auch grosse border erzeugen kann:

• CSS3 Box Generator

Der Generator ist eigentlich nur ein Experiment, um neue HTML5-Funktionen zu testen, geht daher nur in neuesten browsern mit aktivierten JavaScript. Zum rein schnüffeln und austesten von CSS3 ist er dennoch geeignet.