CSS Triangle Generator
Choose a direction, size and colour for a triangle, and see it drawn live. Cardinal directions use the width and height. Corner triangles use the width as their leg length, and the height is ignored.
The output is plain CSS that uses the border model described in the W3C CSS Backgrounds and Borders Module Level 3. It needs no images, no SVG and no clip-path.
width: 0;
height: 0;
border-style: solid;
border-width: 0 40px 60px;
border-color: transparent transparent #6366f1 transparent;How to use it
- Pick a direction. Use a cardinal direction for arrows and carets, or a corner for a folded corner.
- Set the width and height in pixels. For corner triangles only the width matters.
- Choose the colour. Invalid hex values fall back to the default indigo.
- Copy the CSS and apply it to an empty element with a class or an inline style.
About the CSS behind it
The triangle works because an element with no content and zero width and height still has borders. Each border is a trapezoid, and where two borders meet, the join is split along the diagonal. If three borders are transparent and one is coloured, the coloured border is left with a triangular shape. The rules for border width, style and colour are in the W3C CSS Backgrounds and Borders Module Level 3.
An up-pointing triangle with width W and height H has a coloured bottom border of H and transparent sides of W / 2. The total box is then W wide, and the visible shape is the bottom border. The corner triangles use the same idea with two adjacent borders, one coloured and one transparent, so the diagonal forms the hypotenuse.
Triangles are common in tooltips, dropdown carets, quote marks and breadcrumb separators. For tooltips and menus, see the tooltip component and the dropdown component, which both use a caret.
Frequently asked questions
- Why does a triangle need zero width and height?
- The element has no content, so its visible area comes only from its borders. Each border is drawn as a trapezoid that meets the neighbouring border on a diagonal. Making the transparent borders take up the remaining space leaves one coloured triangle.
- How do I make a triangle with a border width that is an odd number?
- The generator uses half the width for the side borders. If you set an odd width, the half value is fractional, such as 7.5px. Browsers handle that correctly, but a whole-number width gives the crispest edges at 1x pixel density.
- Should I use clip-path instead of the border trick?
- Both work. The border trick needs no clip-path support and is easy to read, but it only makes right-angled and isosceles shapes. clip-path can make any polygon, and it also clips the background, the border and the shadow of the element.
- Can I animate the triangle, for example to rotate a dropdown arrow?
- Yes. Put the triangle on a wrapper and rotate the wrapper with transform. Transform is cheap to animate because it does not change layout. Rotating the triangle element itself also works.