CSS-Dreieck-Generator
Dreiecke in CSS erzeugen: Richtung, Breite, Höhe und Farbe wählen, per Border-Trick oder clip-path, fertigen Code kopieren.
Der CSS-Dreieck-Generator erzeugt Dreiecke ohne Bilder in acht Richtungen. Du stellst Breite, Höhe und Farbe ein und wählst die Technik: den klassischen Border-Trick mit einem Element ohne Größe oder clip-path auf einer normalen Fläche. Ideal für Pfeile an Tooltips, Sprechblasen und Dekorationen.
Richtung
.triangle {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 100px solid #2563eb;
}Dreiecke mit CSS
Dreiecke brauchst du für Pfeile an Tooltips und Sprechblasen, Akkordeon-Icons, Dekorationen oder Abschnittsübergänge. Bilder sind dafür unnötig: Zwei CSS-Techniken reichen.
| Technik | Vorteile | Nachteile |
|---|---|---|
| Border-Trick | Läuft überall, ideal für ::before | Nur einfarbig, schwer zu lesen |
clip-path | Verläufe, Bilder, animierbar | Schatten werden mit abgeschnitten |
Freie Vielecke und weitere Formen erstellst du im Clip-Path-Generator, fertige Tooltips mit Pfeil im Tooltip-Generator.
Häufige Fragen
Wie funktioniert der Border-Trick?
Ein Element mit width und height 0 besteht nur aus seinen Rahmen. Die vier Rahmen treffen sich diagonal in der Mitte. Färbt man einen Rahmen ein und macht die angrenzenden transparent, bleibt ein Dreieck übrig.
Border oder clip-path – was ist besser?
clip-path ist verständlicher, unterstützt Verläufe und Bilder als Füllung und lässt sich animieren. Der Border-Trick funktioniert in jedem Browser, auch sehr alten, und eignet sich für Pseudo-Elemente wie Tooltip-Pfeile.
Wie mache ich ein gleichseitiges Dreieck?
Bei einem gleichseitigen Dreieck ist die Höhe die Breite mal √3 / 2, also etwa 0,866-mal die Breite. Der Knopf „Gleichseitig“ rechnet das für dich aus.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.