CSS-Dreieck-Generator

Erstelle reine CSS-Dreiecke mit dem Border-Hack. Wähle Richtung, Größe und Farbe mit visueller Vorschau und kopierfertigem CSS.

CSS Triangle Generator

Create pure CSS triangles using the border hack.

Width100px

Height100px

Color

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent #10b981 transparent;
}

So verwendest du den CSS-Dreieck-Generator

Wähle die Dreieck-Richtung: oben, unten, links oder rechts.
Passe die Breiten- und Höhenregler an, um das Dreieck zu dimensionieren.
Wähle eine Farbe mit dem Farbwähler.
Kopiere das generierte CSS und füge es in dein Stylesheet ein.

Über CSS-Dreiecke

CSS-Dreiecke werden mit einem cleveren Trick erstellt: Breite und Höhe eines Elements auf Null setzen und ihm dicke transparente Ränder geben, dann einen Rand einfärben, um eine Dreiecksform zu erstellen.

Diese Technik wird für Tooltip-Pfeile, Dropdown-Indikatoren, dekorative Elemente und Navigationsmarkierungen verwendet — alles ohne Bilder oder SVGs.

Häufig gestellte Fragen

Wie funktioniert der CSS-Dreieck-Trick? ▼

Indem Breite und Höhe auf 0 mit dicken Rändern gesetzt werden, bilden die Ränder vier Dreiecke. Drei transparente Ränder enthüllen ein sichtbares Dreieck.

Kann ich verschiedene Formen erstellen? ▼

Dieser Generator erstellt Dreiecke. Für andere Formen verwende border-radius oder clip-path.

Funktioniert das in allen Browsern? ▼

Ja. Die Border-Technik ist einer der ältesten und am weitesten unterstützten CSS-Tricks.