CSS Triangle Generator
CSS Triangle Generator
Make pure-CSS triangles for tooltips, carets, and arrows with the border trick, no images needed.
The CSS Triangle Generator creates triangles with pure CSS, using the classic border trick, so you never need an image file for a tooltip arrow, dropdown caret, or corner ribbon again. The technique is elegant but famously fiddly: a zero-size element whose four borders meet as triangles, where making three borders transparent leaves the fourth as a perfect triangle.
Instead of memorising which border to colour for each direction, you simply choose one of eight directions: up, down, left, right, or any of the four right-angle corners. Set the width, height, and colour, watch the live preview, and copy the ready-made CSS class. Corner triangles are ideal for folded-corner effects and ribbon tags, while the directional arrows suit menus, speech bubbles, and step indicators.
The output is a handful of standard CSS lines supported everywhere, with no JavaScript, fonts, or images involved at runtime. The generator itself runs fully in your browser and uploads nothing.
How to use
- Choose a direction from the list.
- Set the width and height in pixels.
- Pick the triangle colour.
- Check the live preview on the stage.
- Copy the CSS and apply the class to any empty element.
Frequently asked questions
How does the border trick work?
An element with zero width and height renders its borders as four triangles meeting at the centre. Colouring one border and making its neighbours transparent leaves a single visible triangle whose size follows the border widths.
Can I make an equilateral triangle?
Set the height to about 0.866 times the width for a near-perfect equilateral shape in the up or down directions.
Can I animate a CSS triangle?
Yes. Because a triangle is just borders on an element, transitions on border colour and transforms like rotation animate smoothly, which is handy for dropdown carets that flip when a menu opens.
Where are CSS triangles used?
Tooltip and popover arrows, dropdown carets, chat bubble tails, play buttons, corner ribbons, and breadcrumb separators are the everyday classics.
Is anything uploaded?
No. Everything runs locally in your browser.