TTULAKITO
Designer

CSS Triangle Generator

Generate CSS-only triangles and arrows with adjustable direction.

All tools

Preview

CSS

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 60px 60px 60px;
  border-color: transparent transparent #3b82f6 transparent;
}

Frequently asked questions

How does the CSS triangle border trick work?
An element with zero width and height shows its borders as four triangles meeting at the center. Make three borders transparent and the fourth colored, and you get a single triangle pointing toward the transparent sides.
Should I use a CSS triangle or an SVG triangle?
CSS triangles are weightless and don't need extra requests, but they can't have gradients, shadows, or smooth edges. Use SVG when you need rotation, fill effects, or precise control over corner radii.
Why is my CSS triangle blurry on retina displays?
Border-based triangles antialias along their diagonal edges, but subpixel rendering can still look fuzzy at certain sizes. Try clip-path: polygon() instead, which gives crisper edges in most browsers.