CSS-Dreiecksgenerator

Erzeugen Sie CSS-Dreiecke mit dem klassischen Randtrick. Legen Sie Richtung, Größe und Farbe fest und kopieren Sie dann den Ausschnitt.

CSS Triangle Generator

Live

Direction

Size60px

Color

CSS output

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #e11d48;

Key capabilities

Erzeugen Sie CSS-Dreiecke mit Randtricks – Richtung, Größe und Farbe.
Läuft in Ihrem Browser
Kostenlose Nutzung

Anleitung

Wählen Sie die Dreiecksrichtung.
Legen Sie Größe und Füllfarbe fest.
Kopieren Sie das CSS.

How this tool works

Wählen Sie die Dreiecksrichtung.
Legen Sie Größe und Füllfarbe fest.
Kopieren Sie das CSS.

Recommended settings

Verwenden Sie zunächst die Standardoptionen und passen Sie sie dann bei Bedarf an

Supported formats

Text / on-page input

File size and limits

Sehr komplexe mehrschichtige Vorschauen wirken sich auf älteren Telefonen möglicherweise langsamer aus.

Privacy

Farb- und CSS-Generatoren laufen vollständig in Ihrem Browser. Vorschauen und Konvertierungen laden Ihre Stile niemals hoch.

Common use cases

Verwenden Sie den CSS-Dreiecksgenerator, wann immer Sie ihn benötigen: Erzeugen Sie CSS-Dreiecke mit Randtricks – Richtung, Größe und Farbe.

Troubleshooting

Die Vorschau sieht nach dem Einfügen anders aus

Überprüfen Sie Ihre Seite auf konkurrierendes CSS (Zurücksetzungen, geerbte Farben). Kopieren Sie die generierte Regel zunächst in ein isoliertes Stylesheet.

FAQ

Lädt dies mein CSS hoch?

Nein. Generatoren und Konverter laufen in Ihrem Browser mit Live-Vorschau.

Brauche ich ein Konto?

Nein. Öffnen Sie das Tool, passen Sie die Steuerelemente an und kopieren Sie das CSS.