🔧

CSS Triangle Generator

Generate pure CSS triangles for tooltips, arrows, and decorative elements. No images or SVGs required.

Input

Output

How to Use

Choose the triangle direction — up, down, left, or right.
Set the triangle size and color.
Copy the generated CSS code (uses the border trick to create the triangle shape).

How do CSS triangles actually work?: CSS triangles use the border rendering behavior: when an element has zero width and height, its borders meet at diagonal lines from each corner to the center. By making three borders transparent and coloring the fourth, only the visible colored border creates a triangle shape. This technique has been used since CSS2 and works in all browsers.
Can I add a border or stroke around the triangle?: Pure CSS border-trick triangles cannot have an outline or stroke directly because the triangle is made of borders. To add a stroke, you can layer two triangles (a slightly larger one as the 'stroke' behind a smaller one as the 'fill') using pseudo-elements `::before` and `::after` — the generator provides this layered code as an option.
Are CSS triangles better than SVG or Unicode arrows?: Each has its use case. CSS triangles are zero-HTTP-request and can be animated with CSS transitions (color, size). SVG triangles offer more shape flexibility and stroke control. Unicode arrows (▶ ▲ ▼ ◀) are simplest but limited in styling. Choose CSS triangles for lightweight decorative elements and tooltips where you want pure CSS control.