Skip to content
TextArray1.87.0
100% local

CSS triangle and arrow generator

Turn a direction, size and color into a CSS rule that draws a triangle or arrow — no image needed.

Output
Related tools
CSS border-radius generatornewDeveloper tools
CSS clamp() generatorDeveloper tools
CSS grid generatorDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS triangle and arrow generator
Pick a direction, a width and height, and a color, and this tool writes the CSS rule that draws the shape — a triangle pointing up, down, left or right, or a corner triangle for a ribbon-style badge. There is no image file to export and no extra markup to add: the shape is pure CSS, so it scales cleanly at any size and stays crisp on high-density screens. It is the building block behind dropdown carets, accordion indicators, ribbon badges, and the little pointer on a tooltip or a chat bubble.
Two techniques are supported. The border trick sets a zero-size box's opposite borders to transparent and colors the rest — the classic recipe, with the widest browser support. clip-path instead draws the shape on a sized box using a polygon, which is easier to read in dev tools and to animate. Switch between them with the technique option.
Turn on "Use as ::after pseudo-element" for a rule scoped to ::after, absolutely positioned flush against whichever side or corner you picked, ready to drop onto an element that already has relative positioning — exactly what a dropdown caret or a tooltip's pointer needs, with no extra HTML. Turn on "Speech bubble with attached arrow" instead and the tool generates two rules together: a bordered, rounded callout box and an arrow tail attached to its edge, pointing the way you chose — the shape behind a chat bubble or a help-text popover.
Everything runs in your browser: nothing you configure is ever sent anywhere. Copy the generated CSS, download it as a .txt file, or send it to another tool's input — the border-radius or clip-path generators, for instance — to keep refining the shape.
FAQ
Which technique should I use, border or clip-path?
The border trick has the widest browser support and is the standard recipe you will see in most CSS tutorials. clip-path produces a real, sized box with a visible bounding area in dev tools, which makes it easier to debug or animate — use it unless you need to support very old browsers.
What is the difference between an edge direction and a corner direction?
Up, down, left and right draw a symmetrical triangle pointing that way — the shape behind an arrow or a scroll indicator. The four corner options draw a right triangle filling one corner of a box, the shape behind a ribbon badge or a folded-corner effect.
Does the pseudo-element option add the position rule for the parent too?
It positions the pseudo-element itself with position: absolute and the correct offsets for the direction you chose. The parent element still needs position: relative (or another positioning context) for that placement to be relative to it — add that rule to whichever selector you attach the pseudo-element to.
Can I use the speech bubble as a tooltip?
Yes. It generates a bordered, rounded box plus an attached arrow pointing in the direction you picked, which is exactly the shape a tooltip or chat-bubble callout needs. Adjust the width, height and color to match your design, then style the box further (background, shadow, text color) in your own stylesheet.
Is anything I type or configure uploaded anywhere?
No. The CSS is generated entirely in your browser from the options you choose — nothing is sent to a server.