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 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).

Border-triangle is universal. clip-path is supported in every browser since 2016 — safe to use anywhere in 2026.

CSS Triangle Generator

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.

—

Direction

Size: 80pxColor

Use clip-path instead

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

Pick a direction (▲▼◀▶ or the four corner triangles).
Set size and colour.
Optionally toggle clip-path mode for a cleaner alternative.
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

Border Radius Generator

Drag corners independently, try elliptical radii, copy the CSS — with chat-bubble, pill, blob, and tab presets.

Color 0 0

CSS clip-path Builder (Circle, Ellipse, Polygon, Inset)

Visual builder for the CSS `clip-path` property — pick a shape (circle, ellipse, inset, or polygon), tweak the numbers with sliders or click the preview to add polygon points, and copy a ready-to-paste CSS declaration. 10 shape presets included (triangle, hexagon, star, arrow, message bubble, plus, …).

Color 0 0

CSS Gradient Generator

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

Color 0 0

CSS Box Shadow Generator

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

Color 0 0

CSS Filter Playground

Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.

Color 0 0

CSS Cubic-Bezier Curve Generator

Drag the control points to design a CSS easing curve — preview the motion live, copy the cubic-bezier() value.

Color 0 0