CSS triangle generator — arrows and tooltip tails with borders or clip-path

How to use the CSS triangle generator

1. Choose where the triangle Points: up, down, left, right, or one of four corners.
2. Set the Width and Height in pixels.
3. Pick a Colour.
4. Choose the Technique: Border trick or clip-path.
5. Copy the .triangle rule. Usually you attach it to a ::before or ::after pseudo-element.

What it does and when to use it

Small triangles appear all over interfaces: the tail of a tooltip or chat bubble, the caret on a dropdown, a “play” icon, or a folded corner on a card. Drawing them in CSS avoids an extra image file and lets the colour change with your theme.

For larger or more complex shapes, such as arrows with a shaft, stars or hexagons, use the clip-path generator. To rotate a triangle to an angle the eight directions do not cover, add a rotation from the transform generator, and for a full button with a caret, start with the CSS button generator.

How it works

Border trick. The rule sets width: 0 and height: 0. For up, down, left and right, the two side borders get half the width (or half the height) in transparent, and the border opposite the point gets the full height (or width) in your colour. Corner triangles need only two borders: one coloured, one transparent.

clip-path. The rule gives the element your real width, height and colour as a background, then cuts it with a three-point polygon such as polygon(0 0, 100% 50%, 0 100%) for a right-pointing triangle.

MDN lists border as Baseline widely available since July 2015 and clip-path since January 2020.

Worked examples

A dropdown caret. Down, 16 × 8 px, #1f2937, border trick:

.triangle {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #1f2937;
}

A folded-corner ribbon. Bottom right, 40 × 40 px, #ef4444: border-bottom: 40px solid #ef4444; with border-left: 40px solid transparent;.

A tooltip tail with clip-path. Left, 24 × 40 px, #0ea5e9: clip-path: polygon(100% 0, 100% 100%, 0 50%); on a 24 × 40 px box.

Limits and tips

• Match the tail colour to the bubble exactly, or the join shows.
• Odd widths give half-pixel borders. A 15px-wide up triangle gets two 7.5px side borders; use even widths so the point lands on a whole pixel.
• Sizes are whole numbers from 4 to 300 px, plenty for icons and tails.