CSS Triangle / Arrow Generator - Pure CSS Shapes

How to use this tool

1. Choose a direction from the direction buttons.
2. Set the width, height, and color, or choose an equal or equilateral preset.
3. Copy either the border-trick CSS or the modern clip-path version.

How CSS triangles work

When an element has width: 0 and height: 0, all of its visible area comes from its borders. Each border meets its neighbours at a 45° diagonal. By making three borders transparent and one coloured, you produce a filled triangle with no images, SVG, or JavaScript.

Common uses

• Dropdown arrow indicators on select menus and accordions
• Speech-bubble tails (using ::after pseudo-elements)
• Directional chevrons in breadcrumbs and pagination
• Decorative section dividers and ribbon corners

Corner triangles

The corner variants (top-left, top-right, etc.) work slightly differently: instead of opposing borders being transparent, only two adjacent borders are used - one coloured and one transparent - to produce a right-angled triangle that fills a corner.

Width and height describe the triangle's full bounding box. For an up- or down-pointing shape, width controls the base and height controls how far the tip projects; for left and right shapes, those roles rotate with the triangle. An 80px by 40px triangle therefore has an 80px base and a 40px altitude. The equal preset links the dimensions, while Equilateral calculates the cardinal triangle's altitude from its base using the ratio √3 ÷ 2. Corner shapes keep their independent width and height because they are right triangles.

Modern alternatives

Both previews use the same direction, dimensions, and color. The border-triangle technique creates a zero-sized element from colored and transparent borders and still works in very old browsers. The second output uses clip-path: polygon(), which makes the triangle points explicit and is now the preferred approach for modern browsers:

.triangle {
  width: 100px;
  height: 100px;
  background: #3b82f6;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Advantages of clip-path: More intuitive syntax, works with any background (gradients, images), supports smooth transitions and animations. Supported in all modern browsers (Chrome 55+, Safari 9.1+, Firefox 54+). Use the border trick only if you need IE11 support.

Code snippet

Minimal CSS for a downward-pointing triangle (the most common use case for dropdown arrows):

.arrow-down {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #333;
}

This creates a 16px-wide triangle pointing down. Adjust the border widths to change the size and aspect ratio.