CSS-Dreieck-Generator

Wähle Richtung, Größe und Farbe, um ein Dreieck aus reinem CSS zu bauen, und kopiere anschließend den Code. Verwendet wird die klassische Technik eines Divs mit Breite und Höhe null und transparenten Rändern — keine Bilddateien, kein SVG, kein clip-path — nur ein paar border-Deklarationen, die jeder Browser versteht.

Was ist dieses Tool?

CSS hat keine eigene Dreiecksform, daher werden Dreiecke mit einem bekannten Trick gebaut: Nimm ein Element mit Breite und Höhe null, gib ihm auf einer Seite einen durchgehenden Rand und auf den beiden angrenzenden Seiten transparente Ränder. Da sich angrenzende Ränder in einem 45-Grad-Winkel treffen, laufen die transparenten Ränder spitz zusammen, sodass nur der farbige Rand als Dreieck sichtbar bleibt.

Dieses Tool baut diese Struktur für dich: Wähle, in welche Richtung das Dreieck zeigen soll, wie groß es sein soll und welche Farbe es haben soll, dann siehst du die Live-Vorschau sich aktualisieren und kopierst das exakte CSS. Derselbe zugrunde liegende Trick wird im gesamten Web für reine CSS-Pfeile, Tooltip-Zeiger und Dropdown-Pfeile verwendet.

Quelle: CSS Backgrounds and Borders Module Level 3, W3C — definiert, wie aneinandergrenzende Rahmenkanten sich im Winkel treffen, was der Mechanismus ist, auf dem diese Dreieckstechnik beruht.

Warum sollte man es nutzen?

Die Live-Vorschau rendert das tatsächliche Dreieck, sodass du Größe, Richtung und Farbe bestätigen kannst, bevor du etwas kopierst.
Deckt alle vier Grundrichtungen ab — oben, unten, links, rechts — mit einer Einstellung.
Keine Bilddateien oder SVG nötig — ein so gebautes Dreieck sind nur ein paar Zeilen CSS.
Nützlich für Tooltip-Zeiger, Dropdown-/Accordion-Pfeile, individuelle Aufzählungszeichen und einfache dekorative Formen.
Läuft komplett in deinem Browser — nichts, was du einstellst, wird irgendwohin hochgeladen.
Kostenlos, keine Anmeldung, funktioniert auf dem Handy.

Anleitung

Wähle eine Richtung — das Dreieck zeigt je nach Seite, die den durchgehenden Rand erhält, nach oben, unten, links oder rechts.
Lege die Größe fest — sie steuert den border-width-Wert auf allen drei Seiten und bestimmt, wie groß das Dreieck erscheint.
Wähle eine Farbe für den sichtbaren (durchgehenden) Rand, die zur Füllfarbe des Dreiecks wird.
Kopiere das generierte CSS und wende es auf ein Element mit width: 0 und height: 0 an — ein leeres <div> oder ein Pseudo-Element wie ::before/::after funktionieren beide gut.

Beispiel

Eingabe

Richtung: unten · Größe: 60px · Farbe: #ea580c

Ausgabe

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Für ein nach unten zeigendes Dreieck kommt die Farbe auf border-top, während der linke und rechte Rand transparent bleiben — die Seite gegenüber der Richtung, in die das Dreieck zeigt.

Warum Breite und Höhe null wichtig sind

Der Trick funktioniert nur, weil das Element keine eigene Inhaltsbox hat — width: 0 und height: 0 bedeuten, dass die gesamte sichtbare Form ausschließlich aus den Rändern entsteht, die sich im Mittelpunkt treffen. Hat das Element irgendeine Breite oder Höhe, laufen die Ränder nicht mehr sauber spitz zusammen und die Form bricht auseinander. Deshalb funktioniert die Technik gleichermaßen gut bei einem leeren <div> wie bei einem ::before/::after-Pseudo-Element mit content: "" — es wird kein tatsächlicher Inhalt benötigt, nur die Randbox.

Die MDN-Dokumentation zur CSS-Eigenschaft border beschreibt, wie sich border-width, border-style und border-color kombinieren lassen, einschließlich wie sich Ränder angrenzender Seiten diagonal treffen (developer.mozilla.org/en-US/docs/Web/CSS/border) — die geometrische Tatsache, auf der diese gesamte Technik beruht.

Häufige Verwendungen für CSS-Dreiecke

Tooltip- und Sprechblasen-Zeiger: ein kleines Dreieck (6–10px) am Rand einer abgerundeten Box, farblich passend zum Hintergrund der Box.
Dropdown- und Select-Pfeile: ein kleines nach unten zeigendes Dreieck neben einem Button oder Select-Element, um anzuzeigen, dass es ein Menü öffnet.
Accordion-/Erweiterungsindikatoren: ein nach rechts zeigendes Dreieck, das sich beim Ausklappen eines Abschnitts nach unten dreht.
Individuelle Listenpunkte: ein kleines nach rechts zeigendes Dreieck statt des Standard-Aufzählungszeichens des Browsers, für einen markanteren Listenstil.
Einfache Banner-/Ribbon-Ecken: ein Dreieck in der Ecke einer Karte, um einen gefalteten Bändchen-Effekt zu simulieren.

Kombination mit anderen CSS-Tools

Als Tooltip-Zeiger verwendete Dreiecke brauchen meist einen passenden Schlagschatten, um optisch mit der Box zusammenzupassen, an der sie hängen — der Box-Shadow-Generator erzeugt diesen Schatten. Für UI-Formen jenseits von Dreiecken (Chevrons, Sterne, Sechsecke) ist clip-path in der Regel der bessere moderne Ansatz, statt weitere Border-Tricks zu stapeln.

→ Box-Shadow-Generator · Border-Radius-Generator

Häufig gestellte Fragen

Warum kommt die Farbe auf den Rand gegenüber der Richtung, in die das Dreieck zeigt?

Stell dir das Element als Raute vor, die aus vier dreieckigen Randsegmenten besteht, die sich in der Mitte treffen. Liegt die Farbe auf dem oberen Rand, nimmt die sichtbare Form die obere Hälfte ein — aber weil das Element die Größe null hat, zeigt dieses 'obere Hälfte'-Dreieck tatsächlich nach unten, dorthin, wo sich die nicht existierende Inhaltsbox des Elements befunden hätte. Dieselbe Logik gilt für alle vier Richtungen.

Kann ich ein Dreieck erstellen, das nicht perfekt gleichschenklig ist?

Ja — dieses Tool erzeugt der Einfachheit halber immer ein symmetrisches Dreieck, aber du kannst das kopierte CSS anschließend von Hand anpassen. Unterschiedliche Breiten der beiden transparenten border-width verzerren das Dreieck zu einer Seite; das unabhängige Ändern der Breite des durchgehenden Rands ändert seine Höhe, ohne die Basisbreite zu beeinflussen.

Funktioniert diese Technik in allen Browsern?

Ja — der randbasierte Dreieck-Trick stützt sich nur auf grundlegende Unterstützung von border-width, border-style und border-color, die seit den frühesten CSS-Implementierungen existiert. Es ist eine der am breitesten kompatiblen reinen CSS-Formtechniken überhaupt.

Wann sollte ich clip-path statt des Border-Tricks verwenden?

Der Border-Trick eignet sich speziell hervorragend für einfache Dreiecke, da er keine zusätzlichen Eigenschaften braucht und überall funktioniert. Für alles Komplexere — Fünfecke, Sterne, Pfeile mit Einkerbung oder diagonale Ausschnitte an einer Box, die weiterhin ein Hintergrundbild zeigen soll — ist clip-path flexibler und einfacher nachzuvollziehen, hat aber eine geringere Unterstützung in älteren Browsern.

Kann ich Text oder ein Icon in das Dreieck einfügen?

Nicht direkt — da das Dreieck-Element Breite und Höhe null hat, gibt es keine Inhaltsbox, die irgendetwas aufnehmen könnte. Um ein Dreieck mit Text oder einem Icon zu kombinieren, verwende es als dekoratives Pseudo-Element (::before/::after) auf einem Elternelement, das es absolut positioniert, und style den tatsächlichen Inhalt des Elternelements separat.