Skip to main content

CSS Triangle Generator

Create CSS triangle and arrow shapes using the pure-CSS border technique. Triangle generator and path CSS generator in one.

Geprüft von · Zuletzt geprüft

100px
100px
CSS
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3b82f6;

Ein Dreieck erstellen

  1. Eine Richtung wählen aus den Schaltflächen - oben, unten, links, rechts oder einen der vier Diagonalen. Die Diagonalen erzeugen rechtwinklige Dreiecke, nützlich für Eckflaggen und Seitenumkehr-Effekte.
  2. Den Breite-Regler ziehen um die Basis einzustellen - die Seite gegenüber der Spitze. Für symmetrische (nicht-diagonale) Dreiecke ist die Breite die horizontale Ausdehnung des Dreiecks.
  3. Den Höhe-Regler ziehen für die Höhe - der Abstand von der Basis zur Spitze. Das Setzen der Breite auf das Doppelte der Höhe erzeugt ein gleichseitig aussehendes Dreieck; gleiche Breite und Höhe geben ein gleichschenkliges rechtwinkliges Dreieck.
  4. Eine Farbe wählen. Der Farbwähler steuert eine einzige border-color auf der sichtbaren Seite der Form; die anderen drei Seiten bleiben transparent.
  5. CSS kopieren. Die Ausgabe ist ein null-dimensionales Element mit vier sorgfältig dimensionierten Rahmen und ohne Hersteller-Präfix.

Der Border-Trick im Detail

CSS-Dreiecke nutzen eine Eigenart des Box-Modells: Wenn ein Element null Breite und null Höhe hat, treffen sich seine vier Rahmen in der Mitte, und benachbarte Rahmen teilen eine 45-Grad-Diagonale. Drei Rahmen transparent und einen undurchsichtig machen, und du bleibst mit einem Trapez - das zu einem Dreieck kollabiert, wenn die null-Dimensions-Einschränkung erzwungen wird. Der sichtbare Rahmen definiert die Basis, und seine Breite plus die der gegenüberliegenden Rahmens definiert die Höhe.

Das ist keine Eigenart, die die CSS-Spezifikation ausdrücklich befürwortet - sie ergibt sich aus den border-Kurzschreibungsregeln in CSS Backgrounds and Borders Level 3, die Rahmen erfordern, an Ecken unter 45 Grad auf Gehrung zu gehen. Jeder Browser seit Netscape 6 hat sich so verhalten, sodass es überall ohne Polyfills funktioniert. Der Render-Pfad ist derselbe wie bei jedem umrahmten Element: Der Compositor rastert die vier Rahmen-Gehrungen als farbige Dreiecke und setzt sie zusammen. Das bedeutet, dass CSS-Dreiecke an transform, opacity und transition wie jedes andere Element teilnehmen und keinen GPU-Shader wie SVG-basierte Dreiecke in einigen Renderern erfordern.

Gute Einsatzmöglichkeiten für ein CSS-Dreieck (oder CSS-Pfeil)

  • Tooltip-Zeiger an einem Beschriftungskasten via absoluter Positionierung befestigt.
  • Sprechblasen, bei denen das Dreieck ein Pseudo-Element auf einem abgerundeten Rechteck ist.
  • Dropdown-Indikatorpfeile neben Auswahlschaltflächen und erweiterbaren Überschriften.
  • Bänder und Banner mit einem eingekerbten Ende, erstellt durch das Überlagern zweier Dreiecke.
  • Fortschrittsschritt-Verbindungslinien - die Chevron-Form zwischen nummerierten Schritten in einem Assistenten.
  • Paginierungspfeile, bei denen du einen scharfen geometrischen Stil statt einer Icon-Schrift möchtest.

Probleme, die Menschen überraschen

  • Nicht ganzzahlige Rahmen werden schlecht antialiasiert. Ein 13,5px-Rahmen auf einer Seite und eine 13,5px-Basis auf einer anderen können eine sichtbare Unebenheit an der Spitze auf 1x-Displays erzeugen. Auf ganze Pixel runden oder die Unschärfe auf hochauflösenden Bildschirmen akzeptieren.
  • Hintergrundfarbe durchblutet. Das Element hat noch einen Hintergrundbereich; wenn du background-color setzt, siehst du ein Quadrat hinter deinem Dreieck. Immer den Hintergrund transparent lassen.
  • Die diagonalen Dreiecke sind nur rechtwinklig. Um ein 30/60/90-Dreieck zu erzeugen, brauchst du clip-path oder SVG - der Border-Trick kann mathematisch nur gleichschenklige und rechtwinklige Dreiecke erzeugen.
  • Rotation für beliebige Winkel ist eine Falle. transform: rotate() funktioniert, aber der Ankerpunkt sitzt in der Mitte des null-großen Kastens, was oft nicht dort ist, wo visuelle Designer es erwarten. transform-origin mit einem expliziten Versatz kombinieren.
  • Rahmen auf Pseudo-Elementen benötigen content: "". Wenn das Dreieck als Tooltip-Zeiger platziert wird, muss ::before/::after content deklarieren oder das Element wird überhaupt nicht gerendert.
  • Umrisse folgen dem Dreieck nicht. Der Browser zeichnet Fokus-Umrisse um den Begrenzungsrahmen des null-dimensionalen Elements - einen quadratischen Ring. Für interaktive Dreiecke verwende clip-path oder benutzerdefinierten box-shadow für den Fokusindikator.

Warum das funktioniert: Ein bisschen Box-Modell-Hintergrund

Das CSS Backgrounds and Borders Module Level 3 spezifiziert, dass wenn zwei benachbarte Rahmen verschiedener Farben an einer Elementecke zusammentreffen, der Übergang zwischen ihnen eine diagonale Linie ist, die die Ecke unter 45 Grad halbiert. Diese Regel - ursprünglich pragmatisch, um Mehrfarb-Rahmen akzeptabel aussehen zu lassen - ist das, was der Dreiecks-Trick ausnutzt. Sie ist älter als CSS 2.1 und eines der frühesten plattformübergreifenden Layout-Verhaltensweisen, das formalisiert wurde. Vergleiche mit der clip-path-Alternative: clip-path: polygon(50% 0, 0 100%, 100% 100%) erzeugt ein mathematisch exaktes Dreieck mit CSS Masking Module Level 1, aber es wurde erst ab 2018 universell unterstützt. Der Border-Trick bleibt nützlich, weil er in jedem Browser funktioniert, der CSS überhaupt unterstützt - einschließlich des abgespeckten WebKit-Builds des Kindle Paperwhite - und keine extra Mal-Durchläufe erfordert.

Dreiecks-Techniken im Vergleich

Drei Wege, ein Dreieck im Browser zu zeichnen, jeder mit Kompromissen. Der Border-Trick (was dieses Tool erzeugt) funktioniert überall, benötigt kein zusätzliches Markup und ist durch Standard-CSS-Eigenschaften trivial animierbar - perfekt für Tooltip-Zeiger und dekorative Pfeile. clip-path: polygon() aus CSS Masking Level 1 lässt dich jedes Element beliebiger Größe in jede dreieckige Form abschneiden, was flexibler ist (spitze und stumpfe Dreiecke sind unkompliziert) und gut mit Hintergründen und Bildern funktioniert, aber bei Focus-Outline und älterer Browser-Unterstützung verliert. Inline-SVG <polygon> ist das mächtigste - genaue Geometrie, Verlauf-Füllungen, Strich-Linien und Vertex-Animation via <animate> - aber es bringt mehr Markup mit sich und bricht die "reines CSS"-Ästhetik. Für die meisten UI-Arbeiten - besonders Tooltip-Rahmen - ist der Border-Trick immer noch das richtige Tool, weil er sich sauber in die Design-Tokens des enthaltenden Elements einfügt. Für Inhalt-Dreiecke gewinnt SVG. Verglichen mit Icon-Fonts wie Font Awesome sind CSS-Dreiecke günstiger (kein Font-Download), besser thematisierbar (erben color-Familie-CSS-Variablen) und unendlich skalierbar.

Häufig gestellte Fragen

Warum braucht ein CSS-Dreieck null Breite und null Höhe?

Weil der Trick darauf beruht, dass die vier Rahmen an einem einzigen Mittelpunkt zusammentreffen und unter 45 Grad auf Gehrung gehen. Mit einer positiven Inhaltsfeldgröße rahmen die Rahmen ein Rechteck ein, statt auf einen einzelnen Punkt zu kollabieren - du würdest den Inhaltsbereich von dreieckigen Splitter umgeben sehen, kein Dreieck. Das Setzen von <code>width: 0</code> und <code>height: 0</code> zwingt die Rahmen, sich am Ursprung zu schneiden, was es erlaubt, drei davon in Unsichtbarkeit verschwinden zu lassen.

Kann ich ein gleichseitiges Dreieck so erstellen?

Nur annähernd. Ein echtes gleichseitiges 60-60-60-Dreieck erfordert ein Höhe-zu-Basis-Verhältnis von etwa 0,866:1. Der Rahmen-Trick erzeugt ein gleichschenkliges Dreieck, bei dem die Höhe der gegenüberliegenden Rahmenbreite entspricht und die Basis dem Doppelten der sichtbaren Rahmenbreite - um also ein gleichseitiges anzunähern, setze die Basis auf etwa das 2-fache der Höhe (z. B. 20px Basis, 17px Höhe). Für pixelgenaue Geometrie wechsle zu <code>clip-path: polygon(50% 0, 0 100%, 100% 100%)</code>, das auch genaue Winkel akzeptiert.

Wie befestige ich ein Dreieck an einer Sprechblase?

Verwende ein <code>::before</code>- oder <code>::after</code>-Pseudo-Element auf der Blase mit <code>position: absolute</code>, dann wende die Dreieck- Rahmen an. Setze <code>content: ""</code> (erforderlich für Pseudo-Elemente zum Rendern), positioniere es relativ zur Blase mit <code>top</code>/<code>left</code>/<code>right</code>/<code>bottom</code> und stimme die sichtbare Rahmenfarbe mit dem Hintergrund der Blase ab. Für eine Sprechblase mit einem Rahmen benötigst du zwei überlagerte Dreiecke - eines etwas größer in der Rahmenfarbe, eines kleiner in der Füllfarbe, versetzt um die Rahmenbreite.

Hat das Dreieck eine Rechteck- oder Dreieck-Trefferzone?

Leider eine Rechteck-Trefferzone. Da das Element null Dimensionen hat, ist sein Begrenzungsrahmen für Treffer-Tests effektiv ein einzelnes Pixel - der Großteil des "Dreiecks", das du siehst, wird außerhalb des Inhaltsbereichs des Elements gerendert, via Border-Rendering. Um eine anklickbare dreieckige Schaltfläche zu erstellen, verwende <code>clip-path</code> auf einem normal großen Element; sein Treffer-Bereich wird dem abgeschnittenen Dreieck entsprechen.

Wird meine Dreiecks-Konfiguration mit jemandem geteilt?

Nein. Richtung, Breite, Höhe und Farbwerte leben im lokalen Zustand der Komponente. Die CSS-Ausgabe wird aus einem Template-Literal berechnet und in einem schreibgeschützten Textarea angezeigt; die Vorschau wird mit einem Inline-<code>style</code>-Attribut gerendert. Es gibt keine Netzwerkanfrage im Zusammenhang mit dem Anpassen der Regler.

Kann ich ein CSS-Dreieck animieren?

Ja. Da Rahmen Standard-CSS-Eigenschaften sind, kannst du <code>border-width</code>, <code>border-color</code> und die <code>transform</code> des Elements reibungslos übergehen. Beachte, dass das Animieren von <code>border-width</code> eher Neuzeichnen als Compositing verursachen kann; für 60fps-Hover-Effekte bevorzuge <code>transform: scale()</code> oder verwende <code>clip-path</code>, das günstig compositet.

Wann sollte ich clip-path dem Border-Trick vorziehen?

Immer wenn das Dreieck Inhalt (Text, Bilder, Hintergründe) enthalten muss, eine nicht-gleichschenklige Form braucht oder Teil eines klickbaren interaktiven Elements sein muss. <code>clip-path: polygon(...)</code> funktioniert auf jedem großen Element und schneidet seinen Inhalt, Rahmen und Hintergründe zusammen ab. Der Border-Trick gewinnt, wenn du nur ein dekoratives Pfeil- oder Zeigerelement brauchst, das neben einem anderen Element sitzt, keinen Inhalt hat und von universellem Browser-Support profitiert.

Kann ich einem CSS-Dreieck eine Verlauffüllung geben?

Nicht direkt - der Border-Trick verwendet eine einfarbige <code>border-color</code>, die ein einzelner Farbwert ist, kein Verlauf. Workarounds umfassen das Platzieren eines verlaufsgefüllten <code>&lt;div&gt;</code> innerhalb eines dreieck-abgeschnittenen Containers mit <code>clip-path</code> oder das Verwenden eines SVG-<code>&lt;polygon&gt;</code> mit einem <code>&lt;linearGradient&gt;</code>-Fill. Für animierte oder Multi-Stop- Verläufe auf der Dreieck-Form ist SVG die sauberste Wahl.

Ist "Dreieck CSS Generator" dasselbe wie "CSS Dreieck Generator" oder "CSS Pfad Generator"?

Ja - die Formulierung variiert, aber das Tool ist dasselbe. "Dreieck Generator CSS", "CSS Dreieck Generator" und "CSS Pfad Generator" beschreiben alle ein Dienstprogramm, das das CSS für eine Dreiecks- oder Pfeilform schreibt. Diese Seite gibt das klassische Border-Trick-Dreieck aus (am kompatibelsten und am häufigsten), und der verwandte <a href="/tools/css-clip-path-generator/">CSS Clip-Path-Generator</a> deckt beliebige Polygon-Pfade ab, wenn du asymmetrische oder stumpfe Dreiecke brauchst.

Mehr CSS & Design

Aspect Ratio Calculator

Calculate and visualize aspect ratios for any dimensions.

Open tool

Blob Shape Generator

Generate organic blob shapes as SVG.

Open tool

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.

Open tool

Color Palette Generator

Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).

Open tool

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

Open tool