How does a CSS triangle work?

An element with zero width and height and thick borders shows only its borders; making three sides transparent and one coloured leaves a triangle.

Can I use it for tooltips?

Yes. CSS triangles are commonly used as the little pointer on tooltips, dropdowns and speech bubbles.

The triangle is a fixed pixel size, but you can scale it with transform or recreate it with relative units if needed.

CSS & Design

CSS Triangle Generator

Create a pure-CSS triangle in any direction and copy the CSS.

Free foreverRuns in your browserNo sign-up

Direction

Size60px

Colour

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 60px solid #1B5DF5;
}

Pure CSS triangles use borders on a zero-size box - no images needed.

About the CSS Triangle Generator

A CSS triangle is made by giving a zero-size element thick borders, where some sides are transparent and one is coloured.

This tool builds that trick for you: choose a direction, size and colour, see it live, and copy the CSS.

It runs in your browser and needs no images.

Key features

Up, down, left or right
Adjustable size and colour
Live preview
Copy CSS

How to use

1Pick a direction.
2Set the size and colour.
3Copy the CSS.

Examples

Up triangle

Output: border-bottom: 60px solid #1B5DF5;

Transparent left and right borders plus a coloured bottom border make an upward triangle.

Frequently asked questions

How does a CSS triangle work?: An element with zero width and height and thick borders shows only its borders; making three sides transparent and one coloured leaves a triangle.
Can I use it for tooltips?: Yes. CSS triangles are commonly used as the little pointer on tooltips, dropdowns and speech bubbles.
Is it responsive?: The triangle is a fixed pixel size, but you can scale it with transform or recreate it with relative units if needed.