Build a CSS triangle visually
Build a pure-CSS triangle using the border trick: pick a direction, size, and color, and copy the resulting CSS.
Which way the triangle points: up, down, left, or right.
Size controls both the triangle's width and height.
A zero-size box with three transparent borders and one colored border, the classic CSS triangle trick.
Frequently asked
How does a border make a triangle?
An element with width and height set to 0 and thick borders on all four sides renders each border as a triangle meeting at the box's center point. Making three of those borders transparent leaves only one visible, which reads as a solid triangle.
Can I use this triangle as a CSS tooltip arrow?
Yes, that's one of the most common uses. Position the element absolutely against the edge of a tooltip or speech-bubble box, pointing toward whatever it's referring to.
Why does the element need width and height set to 0?
Without it, the border-triangle trick doesn't work. The visible content box needs to collapse to nothing so only the border triangles remain.