How does a border make a triangle?

On a zero-width, zero-height box, each side's border is drawn as a trapezoid that meets its neighbors at a diagonal. Making two opposite borders transparent and one solid leaves only that solid border's trapezoid visible — which, at zero width/height, is a triangle.

Should I use the border trick or clip-path for a triangle?

The border trick (used here) works in every browser back to IE, needs no extra CSS property, and is ideal for simple arrows and pointers. clip-path is more flexible for irregular polygons and can be animated more smoothly, but isn't needed for a basic triangle.

Can I make an equilateral triangle instead of isosceles?

Yes — set the two transparent border widths equal to each other and the solid border width to roughly 1.15× that value (this generator's ratio) to approximate equilateral; exact equilateral proportions use border-width ratios of 1 : 1 : √3.

Why do I see a tiny gap or seam at the triangle's tip?

That's sub-pixel antialiasing on the border join, most visible at small sizes or on high-DPI screens. It's a rendering artifact, not a CSS mistake — increasing the size usually makes it disappear visually.

Does this tool send anything to a server?

No — the triangle is rendered and the CSS generated entirely in your browser with plain CSS custom logic. Nothing is uploaded.

CSS TRIANGLE GENERATOR

Pick a direction, size, and color, then copy the pure-CSS border-trick triangle.

Direction

Size: 60px

Color

CSS

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 84px solid #ff6a35;
}

How to build a CSS triangle

1
Pick a direction for the triangle to point: up, down, left, or right.
2
Drag the size slider and pick a color on the live preview.
3
Copy the generated .triangle CSS and paste it into your stylesheet.
4
Give the element width: 0; height: 0; in your markup — the borders alone draw the shape.

Questions

How does a border make a triangle?: On a zero-width, zero-height box, each side's border is drawn as a trapezoid that meets its neighbors at a diagonal. Making two opposite borders transparent and one solid leaves only that solid border's trapezoid visible — which, at zero width/height, is a triangle.
Should I use the border trick or clip-path for a triangle?: The border trick (used here) works in every browser back to IE, needs no extra CSS property, and is ideal for simple arrows and pointers. clip-path is more flexible for irregular polygons and can be animated more smoothly, but isn't needed for a basic triangle.
Can I make an equilateral triangle instead of isosceles?: Yes — set the two transparent border widths equal to each other and the solid border width to roughly 1.15× that value (this generator's ratio) to approximate equilateral; exact equilateral proportions use border-width ratios of 1 : 1 : √3.
Why do I see a tiny gap or seam at the triangle's tip?: That's sub-pixel antialiasing on the border join, most visible at small sizes or on high-DPI screens. It's a rendering artifact, not a CSS mistake — increasing the size usually makes it disappear visually.
Does this tool send anything to a server?: No — the triangle is rendered and the CSS generated entirely in your browser with plain CSS custom logic. Nothing is uploaded.