What is the CSS border triangle trick?

By setting a box to zero width/height and making three borders transparent and one colored, the browser renders a filled triangle shape.

When should I use clip-path instead?

clip-path is cleaner and more flexible for modern browsers. Use the border trick if you need IE11 compatibility.

Can I create non-equilateral triangles?

Yes. Set different width and height values to create right triangles or scalene triangles of any proportion.

How do CSS arrows differ from triangles?

Arrows use a border-based triangle combined with a CSS transform: rotate() to point in the desired direction, useful for accordion chevrons and dropdowns.

Design Free No signup

CSS Triangle Generator

Generate pure CSS triangles and arrows with live preview using the border trick or clip-path.

Loading tool…

About this tool

Create pixel-perfect CSS-only triangles without any images or SVG. Choose from 8 directions: up, down, left, right, and all four diagonal corners. Control width, height, and color with instant live preview. Two techniques are generated side by side: the classic border-trick for maximum browser compatibility and the modern clip-path polygon approach. Also generates CSS arrows (border + rotation transform) for UI chevrons and pointers. Copy-paste ready CSS output for any approach.

How to use

1 Select triangle direction (up, down, left, right, or diagonal corner).
2 Set the base width and height using the sliders.
3 Pick a fill color with the color picker.
4 Copy the border-trick CSS or the clip-path CSS — both are shown.
5 Use the Arrow section to generate a hollow arrow (chevron) CSS snippet.

Frequently Asked Questions

Related tools

CSS Border & Outline Generator

Visually build CSS borders, outlines, and box-shadows with live preview and instant code output.

CSS Clip Path Generator

Visually generate CSS clip-path shapes — polygon, circle, ellipse, inset — with draggable handles, preset shapes, and live preview.

SVG Wave Generator

Create decorative SVG wave dividers for websites with live preview and one-click download.