AZ Tools

CSS Triangle Generator

Color

The classic CSS triangle trick: a zero-size element with thick coloured borders becomes a triangle pointing in the direction opposite the colored side. This tool gives you 8 directions (up/down/left/right + 4 right-angle corner triangles), a size slider, and a colour picker. Toggle 'clip-path' to use the modern alternative — same shape, fewer borders, easier to size with width/height.

—

Preview

CSS
.triangle {
  width: 0;
  height: 0;
  border-bottom: 80px solid #5b8def;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

Border-based triangles use a zero-size element with thick colored borders — the transparent sides cancel out, leaving only the colored triangle visible.

How to use

  1. Pick a direction (▲▼◀▶ or the four corner triangles).
  2. Set size and colour.
  3. Optionally toggle clip-path mode for a cleaner alternative.
  4. Copy the CSS into your project.

Frequently asked questions

Why does the border trick work?
A 0-width element with thick borders renders as four triangles meeting at a point. Make three transparent and one coloured — only the coloured triangle is visible.
Border vs clip-path?
Border is older (works in IE6) and has tiny anti-aliasing differences. clip-path is cleaner and easier to combine with backgrounds/images — preferred for new code.
Can I rotate the triangle?
For non-standard angles, use clip-path mode and adjust the polygon points. The 8 included directions cover most needs (arrows, tooltips, breadcrumbs).
Browser support?
Border-triangle is universal. clip-path is supported in every browser since 2016 — safe to use anywhere in 2026.

Related tools

Color Blindness Simulator

See how your image looks to people with each of 8 types of color vision deficiency (CVD).

Color00

CSS Box Shadow Generator

Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.

Color00

Color Format Converter

Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.

Color00

CSS Gradient Generator

Build linear or radial CSS gradients with multi-stop colors and copy the code.

Color00

Color Palette Generator

Build harmonious color palettes from a base color in six schemes.

Color00

Color Contrast Checker

Check text/background contrast against WCAG AA and AAA levels.

Color00