How does the border trick work?

A zero-sized element with borders renders the borders as four trapezoids meeting at the centre. Making three borders transparent and one coloured leaves a single coloured triangle pointing in the coloured border's direction.

Should I use clip-path instead?

Both work. clip-path: polygon(...) is more intuitive and supports arbitrary shapes. The border trick is universally supported (including ancient browsers) and produces lightweight output for simple triangles. For a single arrow or caret, either is fine.

Can I use a CSS triangle for a tooltip arrow?

Yes — this is the classic use. Place the triangle as a pseudo-element (::before or ::after) on the tooltip box, positioned at the edge.

How do I make a right-angle triangle?

Pick one of the four corner directions in the sidebar. Those use only two borders (not the three-transparent pattern) to produce a triangle filling one corner.

Can I animate the triangle?

Yes. Transition the border-*-width properties to resize the triangle smoothly. For direction changes, animating the border colours rather than the widths is usually cleaner.

CSS Triangle Generator

Classic border-trick triangles in any direction.

Rendering is browser-side.

Generated CSS

width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 100px solid #635BFF;

Similar tools

CSS Gradient Generator

Design linear, radial, and conic gradients with a visual editor.

CSS Box Shadow Generator

Layer shadows with a live preview and copy-ready CSS.

CSS Border Radius Generator

Per-corner radius and organic blob shapes.

What is a CSS Triangle Generator?

The CSS triangle is a classic front-end trick: use carefully-chosen transparent and coloured borders on a zero-sized element to produce a solid triangle. It predates clip-pathand SVG-in-HTML by a decade and still has its place — the output is a single DOM node with five CSS rules, no SVG, no background image, no JavaScript. Perfect for tooltip arrows, dropdown carets, speech-bubble tails, and decorative accents where a full clip-path or SVG would be overkill.

The recipe looks odd until you visualise it. An element with width: 0; height: 0 and four borders renders the borders as four trapezoids meeting at the centre. If you make three of those borders transparent and one coloured, you get exactly one coloured triangle pointing in the direction of the coloured border. Adjust the widths to control the triangle's proportions: border-left and border-right widths set the triangle's width; border-bottom height sets its height (for an upward triangle). Once you see it, you see it everywhere.

Our generator supports eight directions: the four cardinal directions (up, down, left, right) for standard arrows, and four corner directions (top-left, top-right, bottom-left, bottom-right) for right-angle triangles that fit neatly into a corner. Right-angle triangles are less common but useful for card-corner ribbons and playful decorative elements. The copied CSS is ready to paste onto any element with no additional setup.

Why not just use clip-path: polygon()? You can, and in many cases should — clip-path is more intuitive and supports arbitrary shapes. The border-trick persists because it's universally supported (including IE6+), composable with pseudo-elements, and honours:hover / :focus without gotchas. For a single triangular arrow, the border trick is still the lightest option.

Common uses: tooltip arrows (a 10×8px triangle at the edge of a tooltip box); dropdown carets (a small downward triangle in a select-like UI); speech-bubble tails (a larger triangle pointing from a chat bubble to the speaker); CSS-only play/pause buttons (a right-facing triangle and two bars); decorative section dividers (a triangle at the bottom of a hero stacked over the next section).

How to generate a CSS triangle

Pick a direction from the eight buttons.
Adjust width and height sliders until the triangle's proportions look right.
Set the colour to match your design.
Copy the CSS and paste onto your element.

Features

Four cardinal directions plus four corner directions.
Independent width and height sliders for any proportion.
Colour picker for quick brand matching.
Copy-ready CSS — works on any element, no JavaScript required.

Frequently asked questions

How does the border trick work?: A zero-sized element with borders renders the borders as four trapezoids meeting at the centre. Making three borders transparent and one coloured leaves a single coloured triangle pointing in the coloured border's direction.
Should I use clip-path instead?: Both work. clip-path: polygon(...) is more intuitive and supports arbitrary shapes. The border trick is universally supported (including ancient browsers) and produces lightweight output for simple triangles. For a single arrow or caret, either is fine.
Can I use a CSS triangle for a tooltip arrow?: Yes — this is the classic use. Place the triangle as a pseudo-element (::before or ::after) on the tooltip box, positioned at the edge.
How do I make a right-angle triangle?: Pick one of the four corner directions in the sidebar. Those use only two borders (not the three-transparent pattern) to produce a triangle filling one corner.
Can I animate the triangle?: Yes. Transition the border-*-width properties to resize the triangle smoothly. For direction changes, animating the border colours rather than the widths is usually cleaner.