So nutzt du: CSS Dreieck Generator
- Klicke auf eine Richtung — oben, unten, links, rechts oder eine der Ecken.
- Lege Breite, Höhe und Farbe fest.
- Wähle Rahmen (funktioniert überall, ideal für
::before/::after-Pfeile) oder clip-path (leichter lesbar, unterstützt Verläufe). - Kopiere das CSS auf ein Element oder Pseudo-Element.
Zwei Wege, ein Dreieck zu zeichnen
Der Border-Trick: Ein Element mit Breite und Höhe null zeigt nur seine Rahmen, und jeder Rahmen ist ein Dreieck, das sich in der Mitte trifft. Macht man drei davon transparent und den vierten farbig, entsteht ein Pfeil — ganz ohne Bilder. Seine Größe ergibt sich aus den Rahmenbreiten.
clip-path: ein normaler Kasten mit clip-path: polygon(50% 0, 100% 100%, 0 100%). Leichter zu lesen und zu skalieren, und er lässt sich mit einem Verlauf oder Bild füllen.
Beispiel: Tooltip-Pfeil
.tooltip { position: relative; }
.tooltip::after {
content: "";
position: absolute; top: 100%; left: 50%; margin-left: -8px;
border: 8px solid transparent;
border-top-color: #111;
}Weitere Formen: Clip-path Generator, Border Radius Generator, SVG Blob Generator.
Auch gesucht als: css dreieck, css pfeil, tooltip pfeil css, css border dreieck, css triangle, css caret, sprechblase css pfeil.
Passende Tools zu: CSS Dreieck Generator
- Box-Shadow-Generator — Stapel mehrere Schatten-Ebenen, passe Versatz, Weichzeichnung, Ausbreitung und Deckkraft auf einer Live-Karte an und kopiere das CSS für box-shadow oder text-shadow.
- CSS-Mask-Generator — Lass Bilder und Bereiche sanft ausblenden, statt hart abzuschneiden: eine Kante ausblenden, oben und unten, alle vier Kanten, eine radiale Vignette oder einen Spotlight-Effekt.
- CSS Grid Generator — Lege die Spalten, Zeilen und den Abstand fest und ziehe über Zellen, um Bereiche wie Header, Sidebar und Hauptinhalt zu erstellen.
- CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.
Häufige Fragen
Wie erstelle ich ein Dreieck in CSS?
Gib einem Element width: 0 und height: 0 und setze dann die Rahmen: Für einen Pfeil nach oben transparente linke und rechte Rahmen und einen farbigen unteren Rahmen. Dieser Generator schreibt das für jede Richtung und Größe.
Wie füge ich einem Tooltip einen Pfeil hinzu?
Füge ein ::after-Pseudoelement mit content: "" hinzu, positioniere es am Rand des Tooltips und gib ihm die Dreieck-Rahmen aus dem Generator.
Border-Dreieck oder clip-path?
Rahmen funktionieren in jedem Browser und sind der Standard für kleine Pfeile auf Pseudoelementen. clip-path lässt sich leichter skalieren und unterstützt Verläufe.
Kann ein CSS-Dreieck einen Rahmen oder Schatten haben?
Stapel zwei Dreiecke (eines etwas größer in der Rahmenfarbe) oder nutze clip-path auf einem Wrapper mit filter: drop-shadow() für einen Schatten.
Kann ich CSS Dreieck Generator als Web-App installieren und offline nutzen?
Ja. CSS Dreieck Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.