CSS-Dreieck & Pfeil-Generator
Generieren Sie CSS-Dreiecke mithilfe des Border-Tricks.
Wählen Sie Richtung, Größe & Farbe — kopieren Sie den Code sofort.
Über
Der CSS-Dreiecks-Generator erstellt CSS-Dreiecke mit dem klassischen Border-Trick — ohne benötigte Bilder. Er unterstützt alle 8 Richtungen (oben, unten, links, rechts und 4 Diagonalen).
Perfekt für Sprechblasen, Dropdown-Pfeile, Navigationselemente und alle Arten von UI-Dekorationen. Der generierte Code kann direkt in Ihr Projekt eingefügt werden. Die Verarbeitung findet komplett lokal im Browser statt.
Bedienungsanleitung
Richtung auswählen
Wählen Sie aus dem 3×3-Gitter die Richtung aus, in die Ihr Dreieck zeigen soll. Alle 8 Positionen werden unterstützt.
Parameter anpassen
Verwenden Sie die Schieberegler und Farbwähler, um Ihr Dreieck anzupassen. Die Vorschau ändert sich sofort.
Code kopieren
Klicken Sie auf "CSS kopieren" oder "HTML kopieren", um den generierten Code in die Zwischenablage zu übernehmen und einzufügen.
Glossar
- Border-Trick
- Eine CSS-Methode zur Erstellung von Dreiecken durch Setzen von Breite und Höhe auf 0 und transparente / farbige Ränder.
- transparent
- Ein CSS-Farbwert, der vollständig transparent ist. Wird genutzt, um unerwünschte Ränder auszublenden, um ein Dreieck zu formen.
- clip-path
- Eine CSS-Eigenschaft, die ein Element auf eine Form zuschneidet. Eine Alternative zum Border-Trick.
- Sprechblase (Speech Bubble)
- Ein Ballon-förmiges Chat-Element. Ein Dreieck bildet den "Schwanz", der zum Sprecher zeigt.
- Pseudo-element (::before/::after)
- Virtuelle CSS-Elemente, die oft genutzt werden, um das Dreieck an Boxen zu heften, ohne zusätzliches HTML hinzuzufügen.
FAQ
- F.Border-Trick vs. clip-path — was sollte ich verwenden?
- Der Border-Trick funktioniert in älteren Browsern. clip-path unterstützt komplexere Formen, funktioniert aber möglicherweise nicht in allen älteren Browsern. Beides ist für moderne Projekte geeignet.
- F.Kann ich ein gleichseitiges Dreieck erstellen?
- Sie können sich einem annähern, indem Sie das Verhältnis von Breite zu Höhe anpassen. Für ein nach oben weisendes Dreieck können Sie als Richtwert "Breite ≈ Höhe × 2" setzen.
- F.Werden Daten an einen Server gesendet?
- Nein. Alles wird lokal in Ihrem Browser generiert. Es werden keine Daten übertragen.
- F.Kann ich ein responsives Dreieck erstellen?
- Ersetzen Sie die generierten px-Werte manuell durch em-, rem- oder vw-Einheiten, damit sich das Dreieck responsiv anpasst.
- F.Kann das Tool CSS für eine komplette Sprechblase generieren?
- Dieses Tool konzentriert sich nur auf die Generierung des CSS für den Dreiecksteil. Eine komplette Sprechblase wird typischerweise kombiniert, z. B. mit ::before/::after Pseudo-Elementen.
Anwendungsfälle
Chat-Sprechblasen
Ein Dreieck als Sprachausleger für Nachrichten in Chat- oder Benachrichtigungs-UIs hinzufügen.
Akkordeon- & Dropdown-Pfeile
Oben/Unten-Dreiecke verwenden, um offene/geschlossene Set-Zustände bei Menüs anzuzeigen.
Benutzerdefinierte Select-Pfeile
Standardauswahlpfeile in UI-Dropdowns durch gestaltete CSS-Dreiecke ersetzen.
Karussell-Navigation
Links/Rechts-Pfeile für Bild-Slider erstellen, ohne zusätzliche Icon-Fonts laden zu müssen.