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 Gratuito Sem cadastro

CSS Triangle Generator

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

Carregando ferramenta…

Sobre esta ferramenta

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.

Como usar

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.

Perguntas frequentes

Ferramentas relacionadas

Gerador de Bordas e Contornos CSS

Crie visualmente bordas, contornos e box-shadows CSS com prévia ao vivo e saída de código instantânea.

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.