CSS Triangle Generator

Pure CSS triangles in any direction using the border trick. Live preview, copy the CSS.

Frequently asked questions

How does a CSS triangle work?

It uses the 'border trick': an element with zero width and height but thick borders renders each border as a trapezoid meeting at 45-degree diagonals. Make three borders transparent and one colored, and the colored one becomes a triangle. This tool writes that CSS for you.

Why use a CSS triangle instead of an image or SVG?

A CSS triangle needs no extra HTTP request, scales crisply, and is trivial to recolor. It is the classic way to make speech-bubble tails, dropdown carets and tooltips arrows.

Can I make triangles pointing diagonally?

Yes. Besides the four cardinal directions, the generator includes the four diagonal (corner) triangles, which use two colored borders meeting at a corner.