About CSS triangles
This tool generates a CSS triangle using the classic border trick — no images or SVG. Pick the direction, size and colour, preview it live and copy the CSS. Triangles are handy for tooltip arrows, dropdown carets and decorative shapes. It runs in your browser.
How CSS Triangle works
How to use it
- Choose the direction (up, down, left, right).
- Set the size and colour.
- Copy the CSS and apply it to an element.
How the border trick works
An element with zero width and height but thick borders shows each border as a triangle meeting at the centre. Make three borders transparent and one coloured, and you get a single triangle pointing away from the coloured side.
Common uses
- Make a CSS tooltip arrow
- Create a dropdown caret
- Add a speech-bubble pointer
- Build decorative shapes
- Avoid images for arrows
- Style a custom select
- Add a ribbon corner
- Learn the CSS border trick
Frequently asked questions
How do I make a CSS triangle?
Pick a direction, size and colour and copy the generated CSS.
Does it use an image?
No — it uses only CSS borders.
Why width and height zero?
So the borders themselves form the triangle.
Can I change the direction?
Yes — up, down, left or right.
Is it widely supported?
Yes — the border trick works in all browsers.
Is my input uploaded?
No — it runs in your browser.
Is it free?
Yes — completely free with no sign-up.