About the CSS Triangle Generator
This CSS triangle generator produces the classic border-trick triangle used for tooltip carets, dropdown arrows and section pointers, with no images, no SVG and no extra markup. Choose which way the triangle points, set the base width from 10 to 200 pixels and the height independently, pick a colour, and the tool writes the border-width and border-color declarations for you. Getting those two four-value lists right by hand is fiddly and easy to get backwards, which is exactly why a visual preview earns its place here.
How to use the CSS Triangle Generator
- 1
Choose the direction the triangle Points towards — Up, Down, Left or Right.
- 2
Pick a Colour for the visible face.
- 3
Set the Base width, which the tool splits into two equal side borders.
- 4
Set the Height, which becomes the border on the side opposite the point, then copy the rule.
What people use it for
Tooltip and popover carets
Place the triangle in an ::after pseudo-element positioned absolutely against the tooltip, offset by its height, and it points cleanly at the trigger.
Dropdown and select indicators
A small downward triangle beside a label is the conventional signal that a menu will open, and the border trick needs no icon font or SVG request.
Speech bubble tails
A left- or right-pointing triangle attached to the side of a rounded chat bubble completes the shape without an image or a clip-path.
Angled section transitions
A very wide, shallow triangle in the page background colour, overlaid on a section edge, produces a notched divider between two full-width bands.
Why zero width and height produces a triangle
Borders do not meet at right angles. When two adjacent borders of different colours meet at a corner, the browser paints the join as a diagonal running at 45 degrees, which is what stops the colours cutting across one another. Give an element a width and height of zero and there is no content box at all, so those four diagonal joins meet in the middle and the four borders become four triangles pointing inwards, sharing a single apex. Make three of them transparent and only one triangle remains visible. Its base is set by the two borders adjacent to it — each contributing half the base — and its height by its own border width. The moment the element gains any width or height, the four wedges are pushed apart and become trapezoids, which is why the generated rule always includes width: 0 and height: 0 explicitly rather than relying on the element having no content.
The border trick against clip-path
clip-path: polygon(50% 0, 100% 100%, 0 100%) describes the same shape far more legibly, and it brings real advantages: the shape can be any polygon rather than a triangle, it can hold a background image or a gradient, it responds to percentage units so it scales with the element, and it can be transitioned between polygons with the same number of points. Its drawbacks are that the element needs actual dimensions, and that anti-aliasing along the clipped edge is noticeably rougher in some engines than the border join. The border technique remains useful because it needs no sizing, works in every browser ever shipped including old email clients, and requires nothing but a pseudo-element. A third option worth knowing is conic-gradient, which can paint a triangle into a normally sized box and, unlike either of the others, animates smoothly. Choose the border trick for small static carets and clip-path when the shape needs to carry content or change.
Tips
- Put the triangle in a ::before or ::after pseudo-element rather than an empty div, so the markup stays meaningful.
- To fake an outlined caret, stack a slightly larger triangle in the border colour one pixel behind the fill triangle.
- Sub-pixel base widths blur the edge; keep the base an even number so half of it lands on a whole pixel.