CSS-Dreieck-Generator

Der Border-Trick, ein 25 Jahre alter CSS-Hack, der noch funktioniert

Die CSS-Triangle-Technik nutzt aus, wie der CSS-Border-Render-Algorithmus benachbarte Borders behandelt. Wenn zwei Borders an einer Ecke aufeinandertreffen, wird die Grenze zwischen ihnen als diagonale Linie im Winkel der Eck-Halbierenden gezeichnet. Bei einem Element normaler Größe ist die Ecke klein und die Diagonale kaum sichtbar. Aber wenn Sie Breite und Höhe des Elements auf null setzen und ihm dicke Borders geben, übernehmen die Ecken den gesamten visuellen Raum, und was eine unsichtbare Diagonale war, wird zur sichtbaren Kante eines Dreiecks. Machen Sie drei der vier Borders transparent, lassen die vierte gefärbt, und Sie haben ein einzelnes Dreieck gezeichnet, das von der gefärbten Seite weg zeigt. Die Technik wurde um 2007–2008 in den frühen CSS-tricks-Artikeln von Chris Coyier und anderen breit dokumentiert; sie ist seitdem ein Grundpfeiler des Web-Designer-Werkzeugkastens, weil sie eine scharfe, skalierbare, in Hex einfärbbare Form erzeugt, ohne SVG, ohne PNG, ohne zusätzlichen HTTP-Request, ohne komplizierten CSS-Code. Die Mathematik ist einfach, aber kontraintuitiv (die Höhe des Dreiecks ist die Border-Breite der gefärbten Seite; seine Grundlinie ist die doppelte Border-Breite der angrenzenden transparenten Seite). Dieser Generator übernimmt das Rechnen, damit Sie Slider ziehen können statt Border-Breiten auszurechnen.

Moderne Alternativen, clip-path, SVG, conic-gradient

2026 hat das Border-Trick-Dreieck Konkurrenz. CSS clip-path mit der polygon()-Funktion (CSS Masking Module Level 1, Baseline-Browser-Support seit 2017) lässt Sie jedes Element an ein beliebiges Polygon clippen: clip-path: polygon(50% 0, 100% 100%, 0 100%) zeichnet ein nach oben zeigendes Dreieck auf jedem Element. clip-path ist flexibler (beliebig viele Vertices, nicht nur drei; funktioniert auf jedem Element mit Inhalt, nicht nur leeren divs), komponiert besser mit Transformationen und Animationen und unterstützt abgerundete Ecken über die neuere shape()-Funktion. Inline-SVG (<svg><polygon points="50,0 100,100 0,100"/></svg>) gibt Ihnen die meiste Kontrolle, Konturen, Füllungen, Verläufe, Animationen über SMIL oder CSS, Barrierefreiheit über <title>-Elemente. conic-gradient kann über geschickt platzierte Farbstops Dreiecksformen erzeugen, das ist aber eher Kuriosität als praktisches Muster. Das Border-Trick-Dreieck bleibt die richtige Wahl für den einfach-dekorativen Fall (Tooltip-Pointer, Dropdown-Carets, Sprechblasen-Schwänze), wo Einfachheit und Null-Overhead wichtiger sind als Flexibilität; clip-path ist besser, wenn das Dreieck Teil einer komplexeren Form ist, wenn Sie Text hineinlegen müssen oder wenn das Design abgerundete Ecken braucht.

Wo CSS-Dreiecke ihren Wert beweisen

• Tooltip- und Popover-Pointer. Das kleine Dreieck, das eine Tooltip-Blase mit ihrem Anker-Element verbindet, ist der häufigste Einsatzfall, Sie können es als CSS-Triangle-Pseudo-Element (::before oder ::after) am Tooltip aufbauen, positioniert an der zum Anker zeigenden Kante.
• Sprechblasen-Schwänze. Der spitze Schwanz an Chat-Nachrichten, Kommentar-Karten und Zitat-Callouts. Dieselbe Technik wie Tooltip-Pointer, nur größer und so gestylt, dass die Hintergrundfarbe der Blase passt.
• Dropdown-Caret-Indikatoren. Das kleine nach unten zeigende Dreieck in Select-Boxen und Dropdown-Menü-Buttons. Native <select>-Elemente haben vom OS gestylte Carets; eigene Dropdowns aus <button> + Popover brauchen ihr eigenes.
• Akkordeon-Aufklapp/Zuklapp-Indikatoren. Das Dreieck, das beim Klick auf einen Akkordeon-Abschnitt zwischen nach rechts (zugeklappt) und nach unten (aufgeklappt) wechselt. Animiert mit einer CSS-Rotate-Transformation.
• Breadcrumb-Trenner. Das nach rechts zeigende Dreieck zwischen Breadcrumb-Links. Oft als CSS-Triangle mit ::before aufgebaut.
• Banner- und Schleifen-Dekorationen. Die dreieckige Kerbe am Ende eines Sale-Banners oder Tags, die Eck-Faltung auf einem „neu“-Badge, der Chevron unten an einem Hero-Bereich, der zum Scrollen nach unten zeigt. Alles einfarbige Dreiecke, alles Border-Trick.
• Dekorative Trenner. Eine Reihe kleiner Dreiecke als Abschnitts-Trenner, geometrische Muster-Overlays, Retro-Verzierungen.

Barrierefreiheits-Überlegungen

CSS-Dreiecke sind reine visuelle Dekoration, sie haben keine semantische Bedeutung und keine Präsenz im Accessibility-Tree. Screenreader kündigen sie nicht an. Für rein dekorative Verwendung (der Sprechblasen-Schwanz, der Breadcrumb-Trenner) ist das das richtige Verhalten. Für Dreiecke, die Bedeutung tragen (ein Pfeil, der auf den aktiven Abschnitt zeigt, ein Dropdown-Caret, das „zum Aufklappen klicken“ signalisiert), muss die Bedeutung anderweitig kommuniziert werden: ein aria-expanded-Attribut auf einem Dropdown-Trigger, ein sichtbares Textlabel, ein aria-label auf dem Button. Verlassen Sie sich nicht darauf, dass ein CSS-Dreieck Zustand kommuniziert; behandeln Sie es als visuelle Verstärkung eines Zustands, der semantisch über andere Attribute kommuniziert wird. Der Inhalt der CSS-::before- und ::after-Pseudo-Elemente wird von Screenreadern in der Regel nicht vorgelesen, was für dekorative Formen passend ist.

Dreieck-Typen, die dieser Generator erzeugt

• Oben / Unten: gleichschenklige Dreiecke, die nach oben oder unten zeigen, die häufigste Form für Tooltips und Akkordeon-Indikatoren.
• Links / Rechts: nach links oder rechts zeigend, verwendet für Breadcrumbs und Seitenleisten-Hinweise.
• Oben-Links- / Oben-Rechts-Ecken: rechtwinklige Dreiecke, die in die Ecke eines umgebenden Elements passen. Eingesetzt für Bandfaltung- und Eck-Badge-Effekte.
• Unten-Links- / Unten-Rechts-Ecken: rechtwinklige Dreiecke für die gegenüberliegenden Ecken.
• Eigenes Seitenverhältnis: einstellbares Breite-zu-Höhe-Verhältnis für nicht-gleichschenklige Formen, nützlich, wenn ein hoher schmaler Pointer oder ein breiter flacher Chevron gewünscht ist.

Verwandte Tools