Tipps und Tricks » kleine webmaster FAQ
wie kann man Dreiecke mit CSS erzeugen ?
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.
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
um experimentieren eignet sich der CSS3-box-generator zusammen am besten mit Chrome 28+ mit dem man auch grosse border erzeugen kann:
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.
Tags: CSS, CSS3, DIV, Dreieck, HTML, Programmieren, webdesign, webmaster
Verwandte Artikel:
- Tabelle mit DIV-Tags und CSS erzeugen (demos)
- responsive webdesign - wie fange ich an ?
- wie kann man eine Tabelle mit DIV-Tags und CSS3 erstellen ?
Letzte Änderung des Tests: 2016-05-22 10:13
Autor: pipe
Leser: 5348 (3.07 pro Tag )
Revision: 1.0