What does this tool do?
The CSS Triangle Generator builds pure-CSS triangles from a single element using the classic border trick, with no images required. Pick a direction, size, and color, and the tool outputs ready-to-copy CSS alongside a live preview. It's perfect for front-end developers who need arrows, dropdown carets, or speech-bubble tips.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
How the border trick works
A triangle is made from the thick borders of an element with zero width and height. Three borders are set to 'transparent' and the fourth keeps your chosen color, so only that visible edge renders as a triangle. For an upward arrow, the left and right borders are transparent while the bottom border carries the color. The size slider (10-120px) controls border thickness, which scales the triangle. Because the result is vector-based, it stays crisp at any screen resolution.
Where to use it
Use the generated triangles for dropdown and select arrows, accordion indicators, tab pointers, and the pointed tips of tooltips and speech bubbles. Switch between up, down, left, and right with the direction buttons, then match your design with the color picker. Since the output gives you the full set of border lines ready to copy, pasting it into a ::before or ::after pseudo-element takes only seconds.
Frequently asked questions
Why make a triangle with CSS instead of an image?
CSS triangles need no extra HTTP request, weigh nothing in file size, stay sharp at every resolution, and let you change the color with a single line. That makes them more efficient than images for small shapes like icons and indicators.
How do I use the triangle with ::before or ::after?
Give the pseudo-element 'content: "";' and 'position: absolute;', then paste the generated 'width: 0; height: 0;' and border lines. Position it relative to the parent with values like 'top' and 'left'.
Can I make a slanted triangle instead of an isosceles one?
This tool produces symmetric triangles. For a slanted or right-angled triangle, simply edit the generated code and give one of the transparent borders a different thickness from the other.
Is CSS Triangle Generator free?
Yes. CSS Triangle Generator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. CSS Triangle Generator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.