CSS-Dreieck- und Pfeil-Generator

So funktioniert es

Schreiben Sie die Farbe des Dreiecks in das linke Feld — HEX, RGB und HSL funktionieren, und der Code wird bei jeder Änderung neu erzeugt. Wählen Sie eine Richtung und stellen Sie Breite und Höhe ein: 24 Pixel Breite und 16 Pixel Höhe sind ein üblicher Ausgangspunkt für Dropdown- und Tooltip-Pfeile. Das Werkzeug schreibt width: 0 und height: 0 und baut das Dreieck aus Rahmenstärken auf; in der Richtung nach oben teilt sich die 24-Pixel-Basis auf je 12 Pixel für den linken und rechten border-width-Wert — bei ungerader Breite erscheinen halbe Werte wie 12.5px, die der Browser problemlos zeichnet. Die Eckrichtungen nutzen nur zwei Rahmen und füllen die jeweilige Ecke der Box mit einem rechtwinkligen Dreieck; so entstehen Band- und Badge-Schnitte. Kopieren Sie den Code in Ihren eigenen Selektor oder laden Sie die Vorschau als 1200×800-Pixel-PNG herunter.

Dieses Werkzeug ist auch als css dreieck generator, css pfeil erstellen, dreieck mit css zeichnen, css dreieck border trick, css tooltip pfeil, css pfeil nach unten bekannt.

Was ist Border-Trick?

Der Border-Trick ist der klassische Weg, in CSS ohne Bilddatei ein Dreieck zu zeichnen. Eine Box mit null Breite und Höhe erhält dicke Rahmen; weil Rahmen sich an den Ecken in 45-Grad-Diagonalen treffen, nimmt jeder Rahmen die Form eines Dreiecks an. Die gewünschte Seite wird gefärbt, die Nachbarseiten werden transparent gesetzt — sichtbar bleibt nur dieses Dreieck. Die Technik ist sehr alt und funktioniert in praktisch jedem je ausgelieferten Browser gleich; Dropdown-Pfeile, Tooltip-Spitzen und Eckbänder sind die häufigsten Einsatzorte.

Was ist clip-path?

clip-path ist die CSS-Eigenschaft, die den sichtbaren Bereich eines Elements auf einen geometrischen Pfad zuschneidet; polygon(50% 0, 100% 100%, 0 100%) schneidet das Element zu einem Dreieck. Der Unterschied zum Border-Trick: Das zugeschnittene Element ist eine echte Box — sie kann Verlauf, Bild und Text enthalten, und die Kanten werden von den meisten Browsern glatter gezeichnet. Dafür schreibt man die Pfadkoordinaten von Hand, und sehr alte Browser ignorieren die Eigenschaft. Praktisch gilt: Border-Trick für kleine Pfeile, clip-path für große Formen mit Inhalt.

Was unterscheidet das Border-Dreieck vom clip-path-Dreieck?

Das Border-Dreieck ist ein Zeichentrick: In der Mitte gibt es keine echte Fläche für Inhalt, das Dreieck besteht nur aus einfarbiger Rahmenfarbe. Das beschränkt es auf Volltonfarben, dafür läuft es in jedem Browser und zwei Zeilen Code genügen — ideal für kleine Pfeile, Menü-Indikatoren und Eckschnitte. clip-path schneidet dagegen eine echte Box zum Dreieck zu: Verlauf, Foto oder sogar Text passen hinein, und die schräge Kante wirkt auf den meisten Bildschirmen glatter; im Gegenzug schreiben Sie die Koordinaten selbst, und auf sehr alten Browsern wird die Form wieder zum Rechteck. Faustregel: Border-Trick für Pfeile und Eckmarken, clip-path für Formen mit Inhalt oder über 100 Pixel.

Die Null-Größen-Box: das Dreieck ist in Wahrheit ein Rahmen

Der ganze Trick beruht auf einer Beobachtung: Bei einer Box mit dicken Rahmen treffen sich zwei benachbarte Rahmen an der Ecke in einer 45-Grad-Diagonale. Schrumpft man Breite und Höhe der Box auf null, bleiben nur die Rahmen übrig — jeder hat jetzt die Form eines Dreiecks. Färbt man eine Seite und setzt die Nachbarn auf transparent, zeigt der Bildschirm ein einzelnes Dreieck. Löschen Sie die Zeilen width: 0 und height: 0 nicht aus dem Code; bekommt die Box eine Größe, verformt sich das Dreieck zum Trapez.

Eine bekannte Grenze gehört dazu: Die Diagonale entsteht aus dem Rahmen-Rendering des Browsers und kann auf manchen Bildschirmen leicht treppig wirken — je größer das Dreieck, desto sichtbarer. Bei kleinen Pfeilen und Eckschnitten fällt es nicht auf; für dekorative Dreiecke über 100 Pixel lohnt der Blick auf clip-path, das die Kante glatter zeichnet.

Welche Richtung für welche Aufgabe?

Die Bedeutung eines Dreiecks liest sich aus seiner Richtung; das sind die üblichen Paarungen.

• Pfeil unter einer Tooltip-Blase → nach oben oder unten, 12-16 Pixel Basis
• Dropdown-Indikator → nach unten, 8-10 Pixel: er soll klein neben dem Text sitzen
• Weiter / Zurück, Abspielen → nach rechts oder links, Breite und Höhe nah beieinander
• Band, Badge, Ecketikett → Eckrichtungen: das Dreieck füllt die Box-Ecke
• Sprechblasen-Zipfel → eine der unteren Ecken, in der Farbe des Blasenhintergrunds

Häufige Fragen

Ist das Dreieck ein Bild? Lädt die Seite eine Datei?

Nein, es gibt keine Datei; das Dreieck ist reines CSS. Die dicken Rahmen einer Box ohne Größe treffen sich an den Ecken diagonal; wird eine Seite gefärbt und die Nachbarn transparent gesetzt, bleibt ein Dreieck übrig. Weil es Code ist, bleibt es auf jeder Bildschirmdichte scharf, und die Farbe ändert sich mit einer Zeile.

Wie hänge ich das Dreieck an eine Sprechblase oder einen Tooltip?

Der übliche Weg führt über das ::after-Pseudoelement der Blase: Geben Sie der Blase position: relative, dem Pseudoelement position: absolute und content: '', und fügen Sie die von diesem Werkzeug erzeugten Rahmenzeilen hinzu. Mit Eigenschaften wie left und bottom setzen Sie den Pfeil an die Blasenkante — ins HTML kommt kein zusätzliches Element.

Warum wirkt die schräge Kante treppig?

Die Diagonale entsteht beim Zeichnen des Rahmenübergangs, und die Kantenglättung unterscheidet sich je nach Browser; bei großen Dreiecken kann die Stufung sichtbar werden. Kleine Pfeile sind unauffällig. Für ein großes dekoratives Dreieck liefert clip-path: polygon(...) die glattere Kante.

Wo landet meine Farbe im Code?

In der border-color-Zeile: Die gefärbte Seite trägt Ihren Wert, die drei anderen Seiten stehen auf transparent. Anders als bei einem border-radius-Generator ist die Farbe hier Teil des Codes, denn der Rahmen selbst ist das Dreieck; zum Umfärben ändern Sie später genau diesen einen Wert.