CSS Triangle Generator
Note: The triangle points away from the coloured border, not towards it — border-bottom gives a triangle pointing up. That inversion is the single most common reason one comes out facing the wrong way.
It is old, it works everywhere, and it has real limitations. You cannot round its corners, you cannot give it a gradient, and the element has no width or height, which makes it awkward to position and impossible to give a shadow that follows the shape.
clip-path is the modern alternative and does not have those constraints. The element keeps its real dimensions, so it can carry a background image or a gradient, be sized in percentages, and be animated between shapes. What it cannot do is cast a shadow that follows the cut — for that you need a drop-shadow filter on a wrapper, since box-shadow still traces the original box.
The practical case is nearly always a tooltip or a speech bubble arrow, so the generator emits that as a complete pattern rather than just the triangle: a pseudo-element positioned against the bubble, with the offset arithmetic already done. The detail people miss is that a bordered bubble needs two stacked triangles — one for the border colour, one slightly inset for the fill — because a single triangle cannot have a border of its own.
Frequently Asked Questions
Why does my triangle point the wrong way?
Because the coloured border is on the opposite side from the direction it points. border-bottom with transparent left and right gives a triangle pointing up — the bottom border is the base, and the point is at the top. Reversing that is the usual fix.
Border trick or clip-path?
clip-path unless you need to support something ancient. The element keeps real dimensions, so it can take a gradient or an image, be sized in percentages, and animate between shapes. The border trick is smaller to write and supported literally everywhere.
How do I put a border on a triangle?
You cannot, directly — with either method. The standard technique is two triangles stacked: a slightly larger one in the border colour behind a slightly smaller one in the fill colour, offset by the border width. The generated tooltip pattern does exactly this.
Can I give a triangle a shadow?
Not with box-shadow, which traces the element's box rather than the visible shape — you get a rectangular shadow behind a triangle. Put filter: drop-shadow() on a wrapper element instead; it follows the rendered alpha and so follows the point.
Why is there a gap between my tooltip and its arrow?
Sub-pixel rounding. Overlap the arrow into the bubble by a pixel — position it at -1px rather than at the exact edge — and the seam closes. The generated pattern already accounts for this.
