Wie zeichne ich ein Dreieck in purem CSS ohne SVG?
Der klassische CSS-Trick seit etwa 2008: ein `<div>` mit null Dimensionen (width: 0, height: 0) und nur einem farbigen Rand, der Rest transparent, sieht aus wie ein Dreieck. Der Browser schneidet Borders auf der Diagonalen, wo sie aufeinandertreffen, also formt ein einzelner farbiger Rand auf einem Element mit Größe null ein Dreieck.
Das ist 0 KB, null Dependencies, volle GPU-Unterstützung, perfekt für: Pfeile in Dropdowns, Schwänze an Tooltips, Breadcrumb-Trennzeichen. Kein SVG, kein PNG, keine Icon-Font nötig.
Hier wählst du eine Richtung (8 Varianten: 4 Pfeile + 4 Diagonalen), eine Größe und eine Farbe. Das CSS ist kopierbereit.
So nutzt du es
- Wähl eine Richtung, indem du eines der 8 Icons klickst (oben/unten/links/rechts + 4 Ecken).
- Der Größen-Schieberegler (4-200px) steuert das Dreieck. Bei den 4 Kardinalrichtungen ist das Dreieck doppelt so breit wie hoch.
- Farbe über den Picker oder per Hex-Eingabe. Jede CSS-Farbe funktioniert (#hex, rgb, oklch, benannte Farben).
- Kopier das CSS und füg es in dein Stylesheet ein. Wende die `.triangle`-Klasse auf ein leeres `<div>` oder `<span>` an.
- Trick: für nicht-gleichseitige Dreiecke ändere width/height auf unterschiedliche Werte (z. B. größerer Bottom-Border = höheres Dreieck).
Wann das hilft
Ein CSS-Dreieck ist ein allgegenwärtiges UI-Primitiv. Die drei häufigsten Verwendungen:
- Dropdown-Pfeil (das kleine Chevron neben einem Select). Zeigt, dass die Liste geöffnet werden kann. Sehr leicht, GPU-schnell, funktioniert überall.
- Tooltip-/Sprechblasen-Schwanz. Tooltip erscheint über einem Element, ein kleines Dreieck sagt "wir zeigen auf dieses Element". Klassisch.
- Breadcrumb-Trennzeichen (Home > Produkte > Kategorie). Statt ">" oder "/" gibt ein CSS-Dreieck subtile, elegante Trennung.
- Karussell next/prev-Pfeile. Ein Dreieck statt eines SVG-Icons = leichter, GPU-schnell.
- Modal- oder Popover-Indikator. Das Dreieck am Modal-Rand sagt "das zeigt auf Element X".
- Eck-Banner-Dekoration (4 diagonale Varianten). Ein Dreieck in der Karten-Ecke = Retro-Tech-Vibe oder ein "NEU!"-Banner-Badge.
Um einen Schatten unters Dreieck zu setzen (funktioniert!), nutze `filter: drop-shadow()` (`box-shadow` greift nicht, es gibt keine echte Box). Für Animation transformiert sich das Dreieck wie jedes Element. Für komplexere Formen sieh den Clip-Path-Generator.