About CSS Triangle Generator

Build a zero-element triangle using transparent borders — any direction. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

• Frontend developers creating dropdown arrow indicators without images
• UI designers adding decorative triangular accents to section dividers
• Tooltip builders generating CSS-only pointer triangles for popups
• Web developers replacing image-based arrow icons with pure CSS shapes

Tips

• Triangles use the transparent border technique with zero width and height
• Point the triangle in any direction by choosing which border carries the color
• Use generated triangles as tooltip pointers or decorative shape accents

Fun Facts

• The CSS transparent-border triangle technique exploits how browsers render borders meeting at corners — each border forms a trapezoid, and setting width/height to zero creates triangles.
• This triangle trick was first documented by Chris Coyier on CSS-Tricks in 2009 and became one of the most-referenced CSS techniques in web development history.
• Modern CSS offers clip-path: polygon() as an alternative to border triangles, but the border trick remains more widely used because it has 100% browser support dating back to IE6.

FAQ

How can borders make a triangle?

By setting three of the four borders to `transparent` and one to a solid color, the remaining triangular corner becomes visible. Zero HTML elements required.

What about custom angles?

Adjust border widths to change the triangle's proportions. For arbitrary angles beyond equilateral, use clip-path or SVG.

Can I rotate it to point in any direction?

Yes — set the colored border to top, right, bottom, or left. Combine with transform: rotate() for angles in between.

Is this technique outdated?

Still widely used because it's zero-asset. clip-path is a modern alternative with full arbitrary shapes, but the border-triangle trick is smaller and has no rendering cost.