CSS triangle generator

Small triangles appear everywhere in interfaces: tooltip arrows, dropdown carets, speech bubbles and corner ribbons. They can be drawn with pure CSS by using borders on a zero-size element, no images or icon fonts required. This generator outputs the right border values for any direction, size and colour.

How to use it

1. Choose the direction the triangle points: up, down, left, right or a diagonal corner.
2. Set the width, height and colour.
3. Copy the CSS and apply it to an element, often a ::before or ::after pseudo-element.

Example: a downward caret

.caret {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #374151;
}

How the border trick works

Where two borders meet, the browser draws a diagonal join. On an element with zero width and height, the four borders become four triangles meeting in the centre. Making three of them transparent leaves a single visible triangle. The coloured border points in the direction opposite to its side: a coloured top border creates a triangle pointing down.

Tooltip arrow example

Position the triangle with position: absolute on a pseudo-element of the tooltip, for instance top: 100%; left: 50%; transform: translateX(-50%); to sit centred below the bubble.

Modern alternative

clip-path: polygon(50% 0, 100% 100%, 0 100%); also creates triangles, and works on elements with backgrounds, gradients and images. The border technique remains popular because it is simple and supported everywhere.