How does the CSS triangle border trick work?

An element with zero width and height shows only its borders. By making three borders transparent and giving one a colour, the coloured border renders as a triangle pointing away from that edge.

Can I change which way the triangle points?

Yes — the direction control moves the coloured border to a different edge. A coloured bottom border points up, a coloured left border points right, and so on.

Why use a CSS triangle instead of an image or SVG?

A border triangle needs no extra file, scales crisply, and inherits colour easily — making it ideal for tooltip arrows, dropdown carets and speech-bubble pointers without an HTTP request.

How do I control the triangle's size?

The base is set by the two transparent side borders (each half the base width) and the height by the single coloured border. Adjust the base and height controls and the borders are sized to match.

Is anything uploaded?

No — the triangle CSS is generated entirely in your browser.

CSS Triangle Generator

This tool generates a pure-CSS triangle using the classic border trick — no image and no SVG. It is the standard way to make tooltip arrows, dropdown carets and speech-bubble pointers. Choose the direction it points, set the base width, height and colour, then copy the CSS.

How it works

An element with zero width and height shows nothing but its borders, which meet at 45-degree diagonals. If you make three borders transparent and give the fourth a colour, that coloured border renders as a triangle pointing away from its edge. The two transparent side borders are each half the base width, and the coloured border’s thickness sets the height. Changing the direction simply moves the colour to a different edge:

Coloured border	Triangle points
bottom	up
top	down
right	left
left	right

Example

An upward triangle 40px wide and 30px tall in red:

width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid red;

The two 20px transparent borders form the 40px base, and the 30px coloured bottom border points the triangle up. Everything runs in your browser — nothing is uploaded.

Everything runs in your browser — nothing is uploaded.