What the CSS triangle generator does
Triangles are everywhere in interfaces — tooltip arrows, dropdown carets, speech-bubble tails, sort indicators, breadcrumb chevrons — and the classic way to draw one without an image is the CSS border trick. This generator lets you set the direction (up, down, left, right), size and colour, shows the result, and gives you the CSS. It also shows the modern clip-path alternative. Runs in your browser.
How the border trick works
Where two borders of different colours meet at a corner, the browser draws the join as a diagonal. On an element with zero width and height, all four borders meet in the middle, and each border becomes a triangle. Make three of them transparent and one coloured, and a single triangle remains.
/* Triangle pointing up, 20px wide, 10px tall, orange */
.tri-up {
width: 0; height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #E85D26;
}
/* Pointing down: swap border-bottom for border-top
Pointing left: border-top/bottom transparent, border-right coloured
Pointing right: border-top/bottom transparent, border-left coloured */The coloured border is on the side opposite the point. Its width sets the triangle's height; the two transparent borders set half the base each.
Common sizes
| Use | Base × height | Border values |
|---|---|---|
| Dropdown caret | 8 × 4 px | 4px transparent sides, 4px coloured |
| Tooltip arrow | 12 × 6 px | 6px sides, 6px coloured |
| Speech bubble tail | 16 × 10 px | 8px sides, 10px coloured |
| Sort indicator | 10 × 5 px | 5px sides, 5px coloured |
| Breadcrumb chevron | height of the item, e.g. 40 × 20 px | 20px sides, 20px coloured |
Attaching an arrow to a tooltip
.tooltip { position: relative; background: #0F0F0F; color: #fff; padding: 8px 12px; border-radius: 6px; }
.tooltip::after {
content: "";
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #0F0F0F;
}A pseudo-element keeps the markup clean. For a bordered tooltip, stack two arrows: a slightly larger one in the border colour behind a smaller one in the fill colour, offset by the border width.
The clip-path alternative
.tri { width: 20px; height: 10px; background: #E85D26;
clip-path: polygon(50% 0, 100% 100%, 0 100%); }- Real width and height, so it is easier to reason about and to make responsive.
- The background can be a gradient or image, which the border trick cannot do.
- Any angle, not just the four axis-aligned directions — change the polygon points.
- Supported in all current browsers; the border trick still wins for email and ancient browsers.
Tips and gotchas
- Anti-aliasing on the diagonal can look slightly jagged in some browsers; adding
transform: rotate(0.001deg)or using clip-path smooths it. - The border trick cannot take a border of its own; use the stacked-pseudo-element approach or an SVG.
- Zero-size elements collapse in flex/grid layouts; set
flex-shrink: 0or position the arrow absolutely. - For icons that must scale with text, an inline SVG chevron is often cleaner than either method.