How does the CSS triangle trick work?

It exploits how borders render on an element with no width or height: each border forms a triangle, and by making the other three transparent you see only one.

Isn't clip-path simpler?

Yes, clip-path: polygon() is more readable and supports any shape. But the border trick is older and still used because it is extremely lightweight.

When should I use CSS triangles?

For tooltip arrows, selection indicators, small decorations. For complex icons, use SVG.

CSS Triangle Generator

The CSS triangle trick

It is one of the oldest and most elegant CSS hacks. It leverages how the browser renders an element's borders. When you have a div with no width or height but with wide borders, the borders cut diagonally between each other, forming triangles. If you make three borders transparent and leave the fourth visible, you see a single triangle pointing in one direction.

Syntax

.triangle-up {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #000;
}

To point up, you make the border-bottom visible (because the base of the triangle is at the bottom). To point down, you make the border-top visible. Same logic for left and right.

When it's worth it

Tooltips: the little arrow that points to the related element.
Speech bubbles: chat-style messages.
Card arrows: indicating selection or expansion.
Decorations: small ornaments without needing SVG.

Triangle with clip-path

The modern, more readable alternative is clip-path:

.triangle {
  width: 40px;
  height: 30px;
  background: #000;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

clip-path with polygon() takes percentage coordinates and forms any polygon. It is more readable and supports more shapes. The downside: slightly more expensive to render at high element counts.

Asymmetric triangles

If you want a non-equilateral triangle, you can adjust the side border widths separately. border-left: 30px solid transparent and border-right: 10px solid transparent creates a triangle skewed to the right.

Triangles with an outline

Drawing a triangle with a border (outline) is trickier with the border trick: you need two triangles stacked, a smaller one on top of a larger one. With clip-path you can use a drop-shadow filter, or just go with SVG.

Performance

The border trick is extremely lightweight: browsers already optimize border rendering. For tooltips that appear many times, it pays off. If your UI has 200 simultaneous tooltips (rare but possible in dashboards), always pick the border trick.

When NOT to use CSS triangles

For complex icons, non-triangular shapes, or anything requiring composite color, gradients or strokes: SVG is the right tool. CSS triangles are a specific solution for one specific shape.