CSS Triangle Generator

What this tool does

CSS Triangle Generator builds a triangle using the classic zero-size-element-with-transparent-borders technique, works in every browser with no special CSS feature support needed, with adjustable pointing direction, size and colour, and the exact CSS to copy.

A small CSS triangle, for a dropdown arrow, speech-bubble pointer, or decorative shape, is traditionally built with a clever trick: a zero-size element whose borders are mostly transparent except on one side, getting the border widths right by hand is fiddly.

This tool builds that triangle for any of the four cardinal directions, with adjustable size and colour, previewing the result live and giving you the exact CSS using this classic, maximally browser-compatible technique.

How to use CSS Triangle Generator

1. Choose which direction the triangle should point.
2. Adjust the size and colour.
3. Copy the generated CSS.
4. Position the triangle absolutely if using it as a pointer or arrow.

Tips for better results

• This border-based technique works in literally every browser with no special feature support required, unlike clip-path, which has broader but not universally perfect support for every edge case.
• The triangle is built from a zero-width, zero-height element with transparent borders on three sides and a solid coloured border on the fourth, the visible border segment is what forms the triangular shape.
• For a dropdown-arrow or speech-bubble-pointer use case, position this triangle absolutely relative to its parent element to place it precisely where needed.
• For more complex shapes (pentagons, stars, custom polygons) beyond a simple triangle, use the Clip Path Generator tool instead, which better suits arbitrary multi-point outlines.

Common use cases

• Building a dropdown menu’s pointer arrow without an image asset.
• Creating a speech-bubble or tooltip’s pointing tail.
• Adding a simple decorative triangle shape to a design.
• Learning the classic CSS border-trick technique for building shapes without clip-path.

Common mistakes to avoid

• Trying to add rounded corners or more complex detailing to this border-trick triangle; it’s inherently a simple geometric technique, more elaborate shapes need clip-path or an actual SVG/image asset instead.
• Forgetting this element has zero width and height by design, other CSS properties like padding or background-color on the element itself won’t behave as expected, since the "shape" is entirely made of border.
• Using this technique for a complex multi-point shape instead of the simpler triangle it’s suited for; the Clip Path Generator handles pentagons, stars and custom polygons better.