How do I create a triangle in CSS?

Set width and height to 0, make three borders transparent, and color the fourth. The colored border forms a triangle pointing away from its side. The transparent borders control the triangle's width.

Can I create an equilateral triangle in CSS?

Yes. For an equilateral triangle pointing up: border-left and border-right set to half the desired width, border-bottom set to the desired height × 0.866 (√3/2). The CSS Triangle Generator calculates this automatically.

Is clip-path better than the border trick?

clip-path is more readable and supports backgrounds and hover effects. The border trick is simpler for small indicators (tooltip arrows, dropdown carets) and has broader browser support for very old browsers.

How to Create a CSS Triangle (Border Trick Explained)

▲

Try CSS Triangle Generator

Free, no signup →