ifBuyz Tools
Design

CSS-Dreieck-Generator

Eingabe

Wähle Richtung, Grundbreite, Höhe und Farbe.

Richtung
Base Width60px
Höhe80px

Kopiere das erzeugte CSS und wende es auf ein leeres Element an.

Ausgabe

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 80px solid #6366f1;
}

Häufige Fragen

Wie erstellt man Dreiecke mit CSS?
Über Border-Technik bei Elementen mit Breite/Höhe 0.
Lässt sich Richtung und Größe steuern?
Ja, über Border-Seiten und deren Breiten.
Wofür nutzt man CSS-Dreiecke häufig?
Für Tooltip-Pfeile, kleine Marker und UI-Hinweise.