Generate pure-CSS triangles with a live preview and copy-ready code.
Generated locally in your browser.
How do you generate a CSS triangle?
A zero-width, zero-height element is given thick borders; three are transparent and the fourth is coloured, which renders as a triangle pointing away from the coloured side. For example, an upward triangle has transparent left and right borders and a coloured bottom border. This border trick scales crisply at any size and needs no extra markup or images.
Understanding your result
Because borders meet at angles, a box with no content and one coloured border shows only a triangular wedge. It scales crisply at any size and needs no extra markup or images.
Formula and method
A zero-width, zero-height element is given thick borders; three are transparent and the fourth is coloured, which renders as a triangle pointing away from the coloured side.
Assumptions and limitations
This creates solid, straight-sided triangles using the border trick, in the four cardinal and diagonal directions the tool offers. It cannot produce rounded corners, gradients, outlined or hollow triangles, or arbitrary polygons; those need clip-path or SVG instead. The generated element also has real box dimensions, which can affect surrounding layout.
Worked example
An upward triangle has transparent left and right borders and a coloured bottom border.
How to use this tool
- Pick the triangle direction.
- Set the size and colour.
- Copy the generated CSS.
Common mistakes to avoid
- Giving the element width or height — it must be zero for the trick to work.
- Colouring more than one border, which breaks the triangle shape.
About the CSS Triangle Generator
The CSS Triangle Generator creates pure-CSS triangles using the classic border trick. Choose a direction, size and colour, preview it live, and copy ready-to-use CSS.
Who should use this tool
Front-end developers and designers building arrows, carets, tooltips and speech bubbles.
Benefits
- Four directions with a live preview.
- No images — pure CSS.
- Adjustable size and colour.
- Copy or download the code.
Practical use cases
- Adding a caret to a dropdown.
- Making a tooltip or speech-bubble pointer.
- Creating arrow indicators.
Explore all Developer Tools tools
Frequently asked questions
How does a CSS triangle work?
An element with no size and thick borders shows wedge shapes where the borders meet. Making three borders transparent leaves a single coloured triangle.
Can I resize it responsively?
Yes — the size is just the border width, so you can set it in px, em or other units and it scales cleanly.
Can I add rounded corners or a gradient to the triangle?
Not with the border trick this tool uses, which only draws solid, sharp-edged triangles from a single coloured border. Rounded corners, gradients or hollow outlines are beyond what borders can render. For those effects, reach for the clip-path property or an inline SVG shape, which give you full control over the outline and fill.