CSS Triangle Arrow Generator
Generate border-based CSS triangles and arrows.
Triangles and arrows in CSS
The classic border trick turns an empty element into a triangle — the basis for tooltips, dropdown carets, and speech-bubble tails. Remembering which borders to set transparent is annoying. This generator builds the triangle CSS in any direction with a preview.
It saves you from re-deriving the border-color puzzle every time. Pick the direction and size, preview the shape, and copy the CSS to add a crisp arrow or caret without an image or icon font.
Copy-ready triangle
The triangle is made from transparent borders on a zero-size element, with the visible side setting its direction. Generated in your browser.
Frequently asked questions
How does the border trick make a triangle?
A zero-size element with thick borders shows each border as a triangle wedge. Making two borders transparent and coloring the third leaves one visible triangle pointing in the chosen direction.
How big is the triangle?
The size is each border's width, so a 48px size gives a triangle 96px across the base and 48px from base to point.
Is there a more modern way?
clip-path: polygon() on a normal box is easier to size and can hold a background image or gradient, while the border trick has the widest support and needs no extra element.
Related tools
Practical utilities for front-end design and implementation work.