CSS Triangle & Arrow Generator

Build a CSS triangle in your browser. Pick a direction (up, right, down, left), choose isosceles (the classic border-trick) or equilateral (a true 60°-apex triangle via clip-path), set a size and a colour, and copy the result as a CSS class or an inline style. Pure client-side, no upload.

Direction

Up Right Down Left

Shape Size 20 px Colour

Preview

Width: — px
Height: — px
Shape: —
Direction: —

Copy-ready CSS

CSS class

.css-triangle

Inline style

…

Full HTML snippet

…

How it works

A CSS triangle is the trick where you make a zero-size element, give it a thick border on every side, then make three of those borders transparent to leave only one coloured side showing. The remaining visible piece is a sharp, scalable triangle that works at any size and ships as a single CSS class.

The border-trick is right-isosceles by construction: the resulting triangle is always a mirror image across the axis of symmetry, with the apex angle set by the four border widths. Switch to equilateral and the page uses a clip-path: polygon() on a square box instead, giving you a true 60°-apex shape with all three sides equal.