CSS Triangle Generator

A CSS triangle generator using the border trick

This CSS triangle generator produces triangles from borders alone, with no images, SVG or clipping. It is the classic technique for tooltip arrows, dropdown carets, speech bubbles and ribbon ends, and it works in every browser. Choose a direction and size, and the tool calculates the four border widths and colors for you.

How the border trick works

An element with width: 0 and height: 0 is drawn entirely from its borders. Where two borders meet, the browser splits the corner diagonally. If you color one border and make its neighbors transparent, only a triangle remains. The colored border's width sets the triangle's height, and the two side borders set its base.

Example output

The default upward triangle, 100px wide and 80px tall:

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 80px 50px;
  border-color: transparent transparent #0f766e transparent;
}

Only the bottom border is colored; it is 80px thick, and the left and right borders are each half the width. For left and right arrows the tool splits the height instead: a 12 × 16px right-pointing caret gives border-width: 8px 0 8px 12px. The four corner directions produce right-angled triangles, for example border-width: 80px 100px 0 0 for Top left.

Using a triangle as a tooltip arrow

In practice you rarely add an extra element. Put the triangle on a pseudo-element instead:

.tooltip { position: relative; }
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: #111827 transparent transparent transparent;
}

Those values are what the generator outputs for a downward triangle 16px wide and 8px tall.

Tips and common mistakes

• Remember the order. border-width and border-color run top, right, bottom, left. The colored side is the opposite of the direction the arrow points.
• No gradients or outlines. A border triangle is a single solid color. For a bordered arrow, stack two triangles, one 1px larger behind the other.
• Anti-aliased edges. Diagonal edges can look slightly jagged at odd sizes; even pixel values usually render more cleanly.
• Match the box color. For a seamless tooltip, use exactly the same color as the tooltip background.

Border triangle vs clip-path

The border trick is ideal for small, solid arrows. If the triangle needs a gradient, an image fill or a drop shadow that follows its outline, use clip-path: polygon(50% 0%, 100% 100%, 0% 100%) from the CSS clip-path generator instead. Another option for chevrons is a small square with two borders rotated 45 degrees using the CSS transform generator.

Privacy

The triangle is generated in your browser, and nothing is uploaded.