Zum Inhalt springen
TextArray1.87.0
100% lokal

CSS-Dreieck- und Pfeiltgenerator

Geben Sie eine Richtung, Größe und Farbe ein und erhalten Sie eine CSS-Regel, die ein Dreieck oder einen Pfeil zeichnet — ohne Bilder.

Ausgabe
Verwandte Tools
CSS Border-Radius-GeneratorneuEntwickler-Tools
CSS clamp()-GeneratorEntwickler-Tools
CSS Grid GeneratorEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
SQL zu JSONEntwickler-Tools
CSS-Dreieck- und Pfeiltgenerator
Wählen Sie eine Richtung, eine Breite und Höhe sowie eine Farbe, und dieses Tool schreibt die CSS-Regel, die die Form zeichnet — ein Dreieck, das nach oben, unten, links oder rechts zeigt, oder ein Eckdreieck für ein Band-ähnliches Badge. Es gibt keine Bilddatei zum Exportieren und kein zusätzliches Markup: Die Form ist reines CSS und skaliert bei jeder Größe sauber und bleibt auf hochauflösenden Bildschirmen scharf. Sie ist der Grundbaustein hinter Dropdown-Carets, Akkordieon-Indikatoren, Band-Badges und dem kleinen Zeiger auf einem Tooltip oder einer Sprechblase.
Zwei Techniken werden unterstützt. Der Border-Trick setzt die gegenüberliegenden Ränder einer Box mit Nullgröße auf transparent und färbt den Rest — das klassische Rezept mit der breitesten Browserunterstützung. clip-path zeichnet stattdessen die Form auf einer großen Box mit einem Polygon, das in Entwickler-Tools leichter zu lesen und zu animieren ist. Wechseln Sie zwischen ihnen mit der Technik-Option.
Aktivieren Sie "Als ::after Pseudo-Element verwenden" für eine Regel, die auf ::after beschränkt ist, absolut gegen die von Ihnen gewählte Seite oder Ecke positioniert und bereit, auf ein Element zu ziehen, das bereits relative Positionierung hat — genau das, was ein Dropdown-Caret oder ein Tooltip-Zeiger benötigt, ohne zusätzliches HTML. Aktivieren Sie stattdessen "Sprechblase mit Pfeil" und das Tool generiert zwei Regeln zusammen: eine umrandete, abgerundete Callout-Box und einen an ihrer Kante angebrachten Pfeilschwanz, der in die von Ihnen gewählte Richtung zeigt — die Form hinter einer Sprechblase oder einem Hilfe-Text-Popover.
Alles läuft in Ihrem Browser: Nichts von dem, was Sie konfigurieren, wird jemals woanders gesendet. Kopieren Sie die generierte CSS, laden Sie sie als .txt-Datei herunter oder senden Sie sie zur Eingabe eines anderen Tools — zum Beispiel zum Border-Radius- oder clip-path-Generator — um die Form weiter zu verfeinern.
Häufige Fragen
Welche Technik sollte ich verwenden, Border oder clip-path?
Der Border-Trick hat die breiteste Browserunterstützung und ist das Standardrezept, das Sie in den meisten CSS-Tutorials finden werden. clip-path erzeugt eine echte, große Box mit einem sichtbaren Begrenzungsbereich in Entwickler-Tools, was es einfacher macht, sie zu debuggen oder zu animieren — verwenden Sie dies, es sei denn, Sie müssen sehr alte Browser unterstützen.
Was ist der Unterschied zwischen einer Kantenrichtung und einer Eckenrichtung?
Oben, Unten, Links und Rechts zeichnen ein symmetrisches Dreieck, das in diese Richtung zeigt — die Form hinter einem Pfeil oder einem Scroll-Indikator. Die vier Eckenoptionen zeichnen ein rechtwinkliges Dreieck, das eine Ecke einer Box ausfüllt — die Form hinter einem Band-Badge oder einem Umgeknickt-Ecken-Effekt.
Fügt die Pseudo-Element-Option auch die Positionsregel für das übergeordnete Element hinzu?
Es positioniert das Pseudo-Element selbst mit position: absolute und den korrekten Versätzen für die von Ihnen gewählte Richtung. Das übergeordnete Element benötigt immer noch position: relative (oder einen anderen Positionierungskontext) damit diese Platzierung relativ dazu ist — fügen Sie diese Regel zu dem Selector hinzu, an den Sie das Pseudo-Element anhängen.
Kann ich die Sprechblase als Tooltip verwenden?
Ja. Es erzeugt eine umrandete, abgerundete Callout-Box plus einen angebrachten Pfeilschwanz, der in die von Ihnen gewählte Richtung zeigt — genau die Form, die ein Tooltip oder ein Hilfe-Text-Popover benötigt. Passen Sie die Breite, Höhe und Farbe an Ihr Design an und stylen Sie die Box weiter (Hintergrund, Schatten, Textfarbe) in Ihrem eigenen Stylesheet.
Werden meine Eingaben oder Konfigurationen irgendwohin hochgeladen?
Nein. Das CSS wird vollständig in Ihrem Browser aus den von Ihnen gewählten Optionen generiert — nichts wird auf einen Server gesendet.