Warum erzeugt der Border-Trick ein Dreieck?

Wenn ein Block-Element null Breite und Höhe hat, können sich seine Borders nirgendwohin ausdehnen, außer nach innen. Der CSS-Rendering-Algorithmus zeichnet jeden Border als Trapez, das seinen Nachbarn an 45-Grad-Diagonalen begegnet. Bei einer Box ohne Größe kollabieren diese Trapeze zu reinen Dreiecken, die sich in der Mitte treffen. Indem man drei davon transparent und einen einfarbig macht, isoliert man ein einzelnes Dreieck. Es ist ein Nebeneffekt davon, wie Borders im Grenzfall gerendert werden — kein bewusst entworfenes Feature, aber zuverlässig in jedem Browser seit den 1990er Jahren.

Wird der Border-Trick im Jahr 2026 noch empfohlen?

Für dreieckige UI-Elemente wie Dropdown-Carets, Tooltip-Pfeile und kleine Richtungsindikatoren — ja. Er ist leichtgewichtig (kein zusätzliches DOM, kein SVG-Parsing), wird überall unterstützt und übernimmt die Farbe über currentColor. Für alles, was komplexer als ein Dreieck ist (benutzerdefinierte Formen, Kurven, mehrteilige Pfade), nutzen Sie clip-path oder SVG. Der Border-Trick ist nicht veraltet; er ist nur eng abgegrenzt.

Kann ich ein Dreieck mit abgerundeten Ecken erzeugen?

Nicht mit dem Border-Trick — er erzeugt nur scharfe Ecken. Für abgerundete Dreiecke verwenden Sie SVG mit einem Pfad, der abgerundete Linienverbindungen hat, oder clip-path mit einem Polygon und einer separaten border-radius-Behandlung. Einige fortgeschrittene CSS-Techniken nutzen gestapelte Borders oder Pseudo-Elemente, um Rundungen vorzutäuschen, aber sie sind anfällig und brechen bei unterschiedlichen Größen. SVG ist die praktische Wahl.

Wie drehe ich ein Dreieck in einen nicht standardisierten Winkel?

Verwenden Sie CSS transform: rotate() auf dem Dreieck-Element. Der Border-Trick liefert 8 Himmelsrichtungen; für alles dazwischen (etwa einen 30-Grad-Pfeil) drehen Sie das Ergebnis. Beispiel: ein 'rechts'-Dreieck, um 30 Grad gedreht, wird zu einem Pfeil, der nach oben-rechts in 30 Grad zeigt. Der Transform-Ansatz ist einfacher als das Neuberechnen der Border-Breiten, um das Dreieck in eine nicht-gleichschenklige Form zu verzerren.

Gibt es einen Performance-Unterschied zwischen Border-Dreiecken, clip-path und SVG?

Geringfügig ja, aber selten bedeutsam. Border-Dreiecke sind am günstigsten, weil sie nur Borders auf einem leeren div sind — kein Painting jenseits des Borders selbst. Clip-path erfordert, dass der Browser eine Maske berechnet, was beim ersten Painting etwas teurer, danach aber vernachlässigbar ist. SVG fügt einen separaten Knoten zum Render-Tree hinzu. Für einen einzelnen Tooltip-Pfeil ist der Unterschied unmessbar. Für Tausende von Dreiecken in einer Liste (wie Bewertungssterne) verwenden Sie SVG-Sprites — der Pro-Element-Overhead von Inline-SVG dominiert bei großem Maßstab.

Reine CSS-Dreiecke im Jahr 2026 — Wann der Border-Trick noch immer gewinnt (und wann nicht)

Ich habe einen laufenden Witz, dass man die Karriere eines Frontend-Entwicklers daran erkennen kann, wozu er greift, wenn er ein Dreieck zeichnen muss. Wenn er direkt zu einem <svg>-Element greift, hat er CSS wahrscheinlich nach 2018 gelernt. Wenn er clip-path: polygon(...) verwendet, ist er etwa 2015-2018 in die Branche gekommen. Wenn er instinktiv zu einem <div> mit seltsamen Border-Deklarationen greift, macht er das schon lange.

Die Variante mit den "seltsamen Border-Deklarationen" — der CSS-Dreieck-Border-Trick — ist der älteste der drei und immer noch meine Standardwahl für kleine UI-Elemente. Dieser Leitfaden erklärt, warum er funktioniert, wann er die richtige Antwort ist, wann nicht und wie man den CSS Triangle Generator bei ToolBox Hubs nutzt, um die Mathematik zu überspringen.

Der Trick, kurz erklärt

Nehmen Sie ein div mit null Breite und null Höhe. Geben Sie ihm Borders. Die Borders haben keinen Platz zum Ausdehnen, also kollabieren sie zur Mitte hin, wobei jeder Border zu einem Dreieck wird, das die anderen an 45-Grad-Diagonalen trifft.

.demo {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid blue;
  border-bottom: 50px solid green;
  border-left: 50px solid yellow;
}

Sie erhalten ein Quadrat, das in vier farbige Dreiecke unterteilt ist, die sich in der Mitte treffen. Machen Sie nun drei dieser Borders transparent:

.triangle-down {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-bottom: 0;
  border-left: 50px solid transparent;
}

Übrig bleibt ein einzelnes rotes Dreieck, das nach unten zeigt. Das ist der Trick. Er ist seit dem CSS-Spezifikationsstandard, der definiert, wie Borders an Ecken aufeinandertreffen, in CSS enthalten, was bedeutet, dass er in jedem Browser jemals funktioniert hat, einschließlich IE6.

Im Jahr 2026 gibt es drei vernünftige Wege, ein Dreieck in einer Web-UI zu zeichnen:

Der Border-Trick — width: 0; border: ...
clip-path — clip-path: polygon(...) auf einem farbigen Element
SVG — <svg><polygon points="..." /></svg>

Für kleine richtungsweisende UI-Elemente (Dropdown-Carets, Tooltip-Pfeile, Breadcrumb-Trenner, Akkordeon-Chevrons) ist der Border-Trick meist am besten, weil:

Keine zusätzlichen DOM-Knoten. Es ist nur ein gestyltes div oder Pseudo-Element. SVG fügt einen separaten Knoten zum Render-Tree hinzu, plus sein internes <polygon>-Element. Für einen Tooltip mit Pfeil sind das 1 zusätzlicher Knoten gegenüber 2-3.

Erbt currentColor standardmäßig mit minimaler Anpassung. Setzen Sie die Border-Farbe auf currentColor, und das Dreieck übernimmt die Textfarbe des Elternelements. Nützlich für Dark/Light-Mode-Übergaben, ohne CSS-Regeln umzuschreiben.

Keine SVG-Namespace-Sorgen. Sie brauchen kein xmlns, kein viewBox-Nachdenken, keine Sorge, ob das SVG inline oder per Sprite referenziert ist.

Rendert gestochen scharf bei jeder Zoomstufe. Der Border-Trick nutzt das Subpixel-Rendering der CSS-Engine des Browsers, was der am aggressivsten optimierte Rendering-Pfad ist. SVG kann gelegentlich Anti-Aliasing-Artefakte bei 1px-Skalen zeigen, besonders in älteren Browsern.

Für Dreiecke, die SELBST Buttons sind oder Hover-Effekte haben, ist die Styling- und Transition-Unterstützung identisch zu jedem anderen Element — :hover { border-bottom-color: blue } funktioniert einfach.

Wann Sie stattdessen zu clip-path oder SVG greifen sollten

Ehrlich zu den Grenzen:

Alles, was kein einfaches Dreieck ist. Sterne, Pentagone, Pfeile mit komplexen Formen, alles mit Kurven. Der Border-Trick ist aus mathematischer Notwendigkeit dreieckspezifisch. Greifen Sie zu clip-path mit polygon() oder SVG.

Dreiecke, die mit Text skalieren müssen. Der Border-Trick verwendet Pixelwerte. Wenn Sie ein Dreieck wollen, das mit der Schriftgröße des Elternelements skaliert, können Sie em- oder rem-Einheiten als Border-Breiten verwenden — aber es ist umständlich. SVG mit viewBox handhabt Skalierung natürlicher.

Dreiecke mit abgerundeten Ecken. Keine Möglichkeit, Ecken mit dem Border-Trick abzurunden. SVG-Pfad mit stroke-linejoin="round" oder clip-path mit separatem border-radius ist der Weg nach vorne.

Dreiecke, die einen anderen Strich (Outline) als die Füllung benötigen. Borders können keinen eigenen Border haben. SVG hat fill und stroke als separate Eigenschaften — perfekt für umrandete Pfeile.

Dreiecke, die ihre Form ändern (zwischen Formen animieren). SVG kann zwischen Pfaden weich morphen. clip-path kann zwischen Polygonpunkten interpolieren. Border-basierte Dreiecke können ihre Form nicht ändern — nur Größe und Farbe.

Für 80% der UI-Dreiecke gilt keine dieser Bedingungen. Die einfachen Fälle bleiben einfach.

Die Mathematik (oder: Warum Sie einen Generator wollen)

Der Haken am Border-Trick: die richtigen Border-Deklarationen für die gewünschte Richtung herauszufinden, ist nervig.

Für ein nach oben zeigendes Dreieck:

Top-Border: 0
Linker Border: halbe Breite transparent
Rechter Border: halbe Breite transparent
Bottom-Border: volle Höhe einfarbig

Für ein nach links zeigendes Dreieck:

Top-Border: halbe Höhe transparent
Rechter Border: volle Breite einfarbig
Bottom-Border: halbe Höhe transparent
Linker Border: 0

Für ein Eckdreieck (rechtwinkliges Dreieck in einer Ecke):

zwei benachbarte Borders einfarbig (eines davon legt die Größe fest)
zwei gegenüberliegende Borders sind 0
...moment, das ist falsch, lass mich nachsehen...

Sie sehen das Problem. Jede Richtung hat ihre eigene Anordnung, welche Borders gefärbt, welche transparent und welche null sind. Die Mathematik ist machbar, aber so nervig, dass ich denselben Dreieck-CSS dreimal neu schreibe, bevor er stimmt.

Das ist der Sweet Spot des CSS Triangle Generator. Wählen Sie eine Richtung, setzen Sie Breite und Höhe, wählen Sie eine Farbe, kopieren Sie den CSS. Der Generator erledigt die Border-Arithmetik, damit Sie es nicht müssen.

Acht Richtungen, die die meisten Anwendungsfälle abdecken

Die vier Himmelsrichtungen (oben, unten, links, rechts) erzeugen gleichschenklige Dreiecke, die im Element zentriert sind. Das ist es, was Sie für zentrierte Indikatoren wollen: Dropdown-Pfeile unter einem Button, Tooltip-Zeiger, Aufklapp-/Zuklapp-Chevrons.

Die vier Eckrichtungen (oben-links, oben-rechts, unten-links, unten-rechts) erzeugen rechtwinklige Dreiecke, die an einer Ecke verankert sind. Das ist es, was Sie für Eckbänder, Falt-Effekte, Badge-Akzente und chevronartige Breadcrumb-Trenner wollen.

/* Nach rechts zeigender Pfeil (denken Sie an Dropdown-Caret) */
.caret-right {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid currentColor;
}

/* Eckband (oben-rechts) — einfarbiges Dreieck in der oberen rechten Ecke */
.ribbon {
  width: 0;
  height: 0;
  border-top: 60px solid #6366f1;
  border-left: 60px solid transparent;
}

Der Generator deckt alle acht in einer einheitlichen UI ab, sodass Sie sich nicht merken müssen, welche Border-Konfiguration welche Richtung erzeugt.

Praktische Muster

Einige reale Snippets, die den Border-Trick in Aktion zeigen.

Ein Tooltip mit einem Pfeil, der auf das Auslöserelement zeigt. Der Pfeil ist ein Pseudo-Element auf dem Tooltip:

.tooltip {
  position: relative;
  background: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid #1f2937;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

Die border-top-Farbe entspricht dem Tooltip-Hintergrund, sodass der Pfeil als Teil derselben Form erscheint. Das ist der kanonische Anwendungsfall.

Der klassische ">"-Trenner zwischen Breadcrumb-Elementen, aber als CSS-gezeichneter Pfeil:

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}

.breadcrumb-item::after {
  content: '';
  display: inline-block;
  margin-left: 12px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #9ca3af;
}

.breadcrumb-item:last-child::after {
  display: none;
}

Sie könnten ein ›-Unicode-Zeichen verwenden, aber der CSS-Ansatz gibt Ihnen präzise Größenkontrolle und entspricht den Farben Ihres Designsystems exakt.

Sprechblasen-Schwanz

Der Schwanz an einer Chat-Nachrichtenblase:

.bubble {
  position: relative;
  background: #6366f1;
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 280px;
}

.bubble::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #6366f1;
  border-left: 8px solid transparent;
}

Die "unten-rechts"-Eckdreiecksform, verankert an der unteren linken Seite der Blase, gibt diesen klassischen Sprechblasen-Schwanz-Look ohne SVG.

Häufige Fehler

Dinge, die Dreiecke für mich kaputt gemacht haben:

width: 0; height: 0; vergessen. Ohne diese zeichnen die Borders um eine echte Box anstatt zu einem Punkt zu kollabieren. Sie bekommen einen Rahmen statt eines Dreiecks.

Nur die border-color setzen und border-width vergessen. Ein Border mit null Breite zeichnet nicht, unabhängig von der Farbe. Alle vier Borders brauchen explizite Breiten, auch wenn einige null sind.

border-top mit der Spitze des Dreiecks verwechseln. Das Dreieck zeigt WEG vom gefärbten Border. Ein einfarbiger border-bottom erzeugt ein Dreieck, das nach OBEN zeigt. Wenn Sie wollen, dass das Dreieck nach UNTEN zeigt, verwenden Sie einen einfarbigen border-top. Das verwirrt anfangs jeden.

Das Dreieck mit width statt mit Border-Breiten dimensionieren. width: 100px; height: 50px zu setzen, bringt nichts Nützliches — das Element muss immer noch nullgroß für den Border-Trick sein. Die "Größe" des Dreiecks wird vollständig durch die Border-Breiten gesteuert.

Hover-Übergänge auf Farbe, aber nicht border-color. transition: background-color 200ms animiert kein Border-Dreieck. Verwenden Sie transition: border-color 200ms (oder transition: all), damit der Farbwechsel animiert wird.

Eine Anmerkung zu currentColor

currentColor ist ein CSS-Schlüsselwort, das sich auf den Wert der color-Eigenschaft des Elements auflöst. Es ist unglaublich nützlich für Dreiecke, die der Textfarbe des Elternelements entsprechen müssen:

.icon-only-button {
  color: #6366f1;
}

.icon-only-button::after {
  /* Dieses Dreieck erbt die Farbe des Buttons */
  border-left: 8px solid currentColor;
}

.icon-only-button:hover {
  color: #4f46e5;
  /* Dreieck aktualisiert sich automatisch auf die neue Farbe */
}

Dieses Muster macht Border-Dreiecke kompatibel mit Theme-Systemen und Dark Mode. Setzen Sie die Farbe einmal auf das Elternelement, und jedes Dreieck erbt sie. Keine separaten Dark-Mode-CSS-Regeln für jede Dreiecksrichtung nötig.

Tools, die gut zusammenpassen

Dreiecke sind meist ein Teil eines größeren UI-Puzzles. Diese Tools tauchen oft im selben Workflow auf:

CSS Clip Path Generator — für Formen, die komplexer als Dreiecke sind (Sterne, Pentagone, Pfeile)
CSS Gradient Generator — zum Füllen von Hintergründen hinter Ihren Dreiecken
CSS Border Radius Generator — für abgerundete Formen, die die scharfen Dreiecke ergänzen
Color Picker — zum genauen Einstellen der Dreiecksfarbe aus einer Markenpalette

Der CSS Triangle Generator ist kostenlos, läuft vollständig in Ihrem Browser und gibt sauberes CSS aus, das Sie in jedes Stylesheet einfügen können — keine Framework-Abhängigkeiten, keine Vorverarbeitung, kein Build-Schritt erforderlich. Wählen Sie eine Richtung, ziehen Sie die Größenregler, kopieren Sie den Code.

Warum ich das im Jahr 2026 immer noch verwende

Frontend-Trends bewegen sich schnell. Frameworks kommen und gehen. CSS selbst hat Container Queries, :has(), Layered Styles, View Transitions hinzugefügt — wichtige Features, die ändern, wie wir moderne Interfaces schreiben.

Aber der Border-Trick ist immer noch die richtige Antwort auf "Ich brauche ein kleines Dreieck als Teil eines UI-Elements." Er ist klein, schnell, gut verstanden und funktioniert überall. Dass er alt ist, ist kein Problem — es ist ein Zeichen, dass er sein Problem beim ersten Mal vollständig gelöst hat. Manche Techniken müssen nicht ersetzt werden.

Greifen Sie zu SVG, wenn Sie Flexibilität brauchen. Greifen Sie zu clip-path, wenn Sie Nicht-Dreiecksformen brauchen. Aber für die Dreiecke, die in Tooltips und Dropdowns und Breadcrumbs auftauchen — die häufigsten UI-Dreiecke — ist der Border-Trick immer noch die sauberste Option.