CSS & Layout
CSS Triangle Generator
Pick a direction, set the base and height, choose a colour and watch the live preview react. Then copy the border-based CSS or download it as a file. Everything runs in your browser.
Triangle controls
80 × 60 px
3- or 6-digit hex, with or without the leading #.
Live preview
updates as you changeCSS output
How it works
A CSS triangle is an element with width: 0 and height: 0 whose
borders meet in the middle. One border carries the colour while the adjacent borders stay
transparent, so the visible border forms a triangle. For the four main
directions the base is split across two borders and the height is the coloured border;
the corner options use one coloured border plus a transparent neighbour. Nothing is sent
to a server — the optional share link encodes the shape in the URL fragment, which stays
in the browser.