CSS-Dreieck-Generator
Erstellen Sie ein reines CSS-Dreieck mit dem klassischen Trick transparenter Ränder – mit Live-Vorschau und kopierfertigem Code.
So funktioniert's
Der Trick beruht darauf, dass ein Element ohne Breite und Höhe mit dicken Rändern Ränder anzeigt, die sich in einer Spitze treffen. Wenn Sie zwei Ränder transparent machen und den dritten einfärben, erhalten Sie ein Dreieck, das in die gewünschte Richtung zeigt – ganz ohne Bild oder SVG für einen Tooltip-Pfeil oder einen dekorativen Cursor.
Warum diesen Trick anstelle eines Bildes verwenden?
Ein reines CSS-Dreieck benötigt keine Netzwerkanfrage, lässt sich perfekt skalieren und ändert seine Farbe sofort über eine CSS-Variable – im Gegensatz zu einem Bitmap-Bild oder sogar einem externen SVG.
Kann ich die Farbe oder die Größe des Dreiecks animieren?
Ja, da es sich um Standard-CSS-Eigenschaften handelt (border-color, border-width), können sie wie jede andere CSS-Eigenschaft mit transition oder @keyframes übergehen oder animiert werden.
100% lokale Verarbeitung: Der Code wird vollständig in Ihrem Browser über WebAssembly erzeugt.