Why Borders Instead Of clip-path?

Border triangles work everywhere, render crisply at any DPI and need no extra element sizing — though clip-path is the better fit for complex shapes.

Why Is My Triangle Blurry On Edges?

Half-pixel border widths can anti-alias softly; keep the split dimension an even number of pixels for the sharpest edge.

CSS Triangle Generator

Point a pure-CSS triangle any of 8 directions, size and color it, and copy the border-trick CSS with a live preview.

Triangle Setup

The classic zero-size-box border trick — no images, no clip-path.

Direction

Width (px)Height (px)Color

CSS

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 90px solid #4f46e5;
}

Corner triangles use two borders and fill the full width × height box; edge triangles split one dimension across two transparent borders.

Loading Tool…

What Is the CSS Triangle Generator?

The CSS Triangle Generator builds the classic zero-width, zero-height border trick: transparent borders on two sides and a solid border on the third form a crisp triangle with no images or clip-path. Choose from 8 directions (4 edges + 4 corners), set width, height and color, and copy ready-to-paste CSS while the preview updates live.

How It Works

Pick a direction, adjust the pixel size and color, and copy the CSS. The preview renders from the exact same rules you copy.

When to Use It

Use it for tooltip and popover arrows, dropdown carets, ribbon ends, and decorative corner accents — anywhere a tiny triangle beats loading an icon.

Frequently Asked Questions

Why Borders Instead Of clip-path?: Border triangles work everywhere, render crisply at any DPI and need no extra element sizing — though clip-path is the better fit for complex shapes.
Why Is My Triangle Blurry On Edges?: Half-pixel border widths can anti-alias softly; keep the split dimension an even number of pixels for the sharpest edge.

Found an issue? Send Feedback. See our data sources and update policy for tools that depend on changing information.