Toolcroft

Color Tools

CSS Triangle / Arrow Generator - Pure CSS Shapes

Generate pure CSS triangles and arrows in any direction without images or SVG. Adjust size, color, and direction, then copy the CSS class ready to paste into your stylesheet.

Generated CSS
.triangle {
  width: 0;
  height: 0;
  border: 40px solid transparent; border-bottom: 40px solid #3b82f6;
}

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.

Modern alternatives

The border-triangle technique is a clever CSS hack, but clip-path: polygon() is now the preferred approach for creating triangles in 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.