CSS Triangle Generator

This tool generates a pure-CSS triangle using the classic border trick — no image and no SVG. It is the standard way to make tooltip arrows, dropdown carets and speech-bubble pointers. Choose the direction it points, set the base width, height and colour, then copy the CSS.

How it works

An element with zero width and height shows nothing but its borders, which meet at 45-degree diagonals. If you make three borders transparent and give the fourth a colour, that coloured border renders as a triangle pointing away from its edge. The two transparent side borders are each half the base width, and the coloured border’s thickness sets the height. Changing the direction simply moves the colour to a different edge:

Example

An upward triangle 40px wide and 30px tall in red:

width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid red;

The two 20px transparent borders form the 40px base, and the 30px coloured bottom border points the triangle up.

Common use cases

Tooltip arrows. A tooltip box with a triangle pointing down works by absolutely-positioning the triangle element below the box. The arrow is a separate ::after pseudo-element so no extra HTML is needed:

.tooltip::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #333;
}

Dropdown carets. A tiny right-pointing or down-pointing triangle next to a label is often implemented as a CSS triangle rather than a Unicode character, because it scales cleanly with em-based sizing and inherits colours reliably.

Speech bubbles. A speech bubble combines a rounded div with a border triangle pseudo-element. Using ::before lets you add a shadow outline by stacking a slightly larger version in a darker colour behind the main triangle.

Making equilateral and right-angled triangles

The border trick produces right-angled triangles by default. An equilateral triangle (all sides equal) needs the height to be approximately 0.866 times the base. For a 60px base:

/* equilateral triangle pointing up */
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 52px solid steelblue; /* 60 * 0.866 ≈ 52 */

An isosceles right-angle triangle uses equal side borders:

/* right-angle triangle, top-left corner */
border-right: 50px solid transparent;
border-top: 50px solid coral;

When to use clip-path instead

The border trick is well-supported and zero-dependency, but has two limits: it only makes right-angled or isosceles triangles, and adding a border or box-shadow to the triangle itself is not straightforward. For complex triangle shapes, rounded triangle variants, or rotating triangles in animation, clip-path: polygon(...) is cleaner — use the companion CSS Clip-Path Generator for those cases.

Everything runs in your browser — nothing is uploaded.