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 免费无需注册

CSS Triangle Generator

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

正在加载工具…

关于此工具

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.

使用方法

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.

关于此工具

使用方法

常见问题