CSS Triangle Generator

Generate pure CSS triangles — no images, no SVG. Pick direction, size and color, then copy the border-trick or clip-path code.

Direction
Size
Width 80px
Height 80px
Color
CSS Method
📦 CSS Tools + UIFlow Complete Bundle
Every preset pack + all UI components: 368 snippets in one file. One-time, €19.
✓ Matching set, tested together · ✓ Commercial & client projects OK · ✓ Instant download
€19 →
🎁 Not ready to buy? Get 10 free CSS presets →

About CSS Triangles

The classic CSS triangle uses an element with width:0; height:0 and colored borders. Because borders meet at 45° angles, making adjacent borders transparent reveals a triangle. This trick works in every browser without any images or SVG. The modern alternative is clip-path: polygon() — easier to read, supports gradients and background images, and scales freely. One caveat: clip-path clips the element's box but does not collapse its layout space, while the border trick produces a truly zero-size element. Choose the border method for tooltips and UI arrows, and clip-path for decorative shapes.

Related Tools

CSS Clip-Path Generator Polygon, circle and ellipse clip-path shapes — drag points Border Radius Generator All four corners independently — round, pill, blob shapes CSS Gradient Generator Linear, radial and conic gradients with multiple color stops SVG Wave Generator Layered SVG waves for website sections — animated, multi-layer