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.
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.
Ähnliche Tools
CSS-Gradient-Generator
Schöne CSS-Verläufe visuell erstellen. Linearen, radialen oder konischen Typ wählen, Farbstopps hinzufügen, Winkel anpassen und Live-Vorschau sehen. CSS mit einem Klick kopieren.
Box-Shadow-Generator
Gestalte CSS-Box-Shadows visuell mit Live-Vorschau. Passe Versatz, Weichzeichnung, Ausbreitung und Farbe an und kopiere das fertige CSS sofort.
Glassmorphismus-Generator
Generiere CSS-Glassmorphismus-Effekte mit Unschärfe- und Transparenzsteuerung. Live-Vorschau und kopierfertiges CSS für Milchglas-UI-Designs.