CSS Triangle Generator

In short A CSS triangle is made from borders, and once you see why it works you can never unsee it. Give an element zero width and height and thick borders, and the four borders meet each other at 45° diagonals — so each border is already a triangle. Make three of them transparent and colour the fourth, and what is left is a single triangle pointing away from the coloured side. Change which border is coloured to change the direction; make the two side borders unequal to skew it. The trick predates every modern alternative and is still the most compatible way to draw a tooltip arrow, a dropdown caret or a ribbon end without an image. Two things worth knowing before using it. The triangle is made of border, so it cannot take a gradient, a border of its own, or a border-radius — if you need any of those, `clip-path: polygon()` is the modern approach and is well supported now. And because the element has no width or height, it will not respond to `width` at all: the size comes entirely from the border widths, which is why resizing one feels unintuitive until you know where the dimensions actually live.