Tipps und Tricks » kleine webmaster FAQ

ID #1833

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.

dreieckige Zeichen Effekte mit text-shadow

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

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

Pfeiledas 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 !

quadrat ein gedrehtes Quadrat

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

Pfeile2 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:

Letzte Änderung des Tests: 2016-05-22 10:13
Autor: pipe

Leser: 4831 (4.08 pro Tag )


Revision: 1.0

Artikel bewerten

bisher bewertet
3.37 (59 ×)

1 2 3 4 5

Kommentar schreiben


Spam Schutz

..