About the CSS Triangle Generator
Triangles are used for tooltip arrows, dropdown carets and speech bubbles. Without an image, the classic way to draw one in CSS is the border trick: an empty box with thick borders, where the borders meet at diagonal edges. Colouring one border and leaving the others transparent leaves a triangle. This generator writes that CSS for the direction, width, height and colour you choose, and shows a preview. Type the direction, the width, the height and the colour and the CSS triangle appears at once, with a few related figures underneath, and you can copy the result with one tap. The sums run in your browser, so nothing you enter is uploaded.
Updated October 2026
How to use the CSS Triangle Generator
- 1Enter the direction, the width, the height and the colour.
- 2Pick the units or options from the menus if the CSS triangle tool offers them.
- 3Read the CSS triangle in the large result box.
- 4Look at the extra rows for related figures.
- 5Press Copy result to keep the answer.
When you need the CSS triangle
Front-end developers use CSS triangles for the small pointer on a tooltip or a popup, for the arrow on a select box, and for steps in a breadcrumb trail. It is small, scales with the CSS and needs no image file.
To add a pointer to a speech bubble, place the triangle in a pseudo-element such as ::after and position it next to the bubble. The triangle can be any colour, so it matches the box it is attached to.
How the CSS triangle is worked out
The box has width 0 and height 0. For an upward triangle, the left and right borders are transparent with half the width each, and the bottom border has the height and the colour. An upward triangle 100 pixels wide and 80 pixels high in #E4572E is width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid #E4572E; Changing the direction swaps which border carries the colour.
Every answer on this page comes from that one rule, so you can check any result by hand with a calculator. The figures shown underneath, such as other units, are conversions of the same answer.
- Four directions
- Live preview
- Hex colour
Mistakes to avoid with CSS triangle
The colour should be given as a hex code. A border triangle has no outline or shadow of its own, so box-shadow does not follow its shape. For shadows or gradients inside the triangle, use clip-path or an SVG instead.
On phone and computer
On a phone, type into the boxes one after another and read the CSS triangle underneath; Copy result puts it on the clipboard for a message or a note. On a computer the inputs sit on the left and the answer on the right, so you can change one figure and watch the CSS triangle move. The css triangle generator works the same on both. Use Border Radius Generator and CSS Box Shadow Generator for the box around it, CSS Flexbox Generator to place it, and CSS Gradient Generator for a coloured background.
Features
- Zero-size box
- Use ::after for pointers
- clip-path for shadows
- Clear messages when the CSS triangle inputs make no sense
- Copy the result with one tap
- Private: nothing is uploaded
Frequently asked questions
How do I calculate CSS triangle?
The box has width 0 and height 0. For an upward triangle, the left and right borders are transparent with half the width each, and the bottom border has the height and the colour. An upward triangle 100 pixels wide and 80 pixels high in #E4572E is width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid #E4572E; Changing the direction swaps which border carries the colour.
What is the formula for CSS triangle?
The box has width 0 and height 0. For an upward triangle, the left and right borders are transparent with half the width each, and the bottom border has the height and the colour. The css triangle generator applies it exactly and rounds only the displayed answer to six significant figures.
How does the border trick work?
Where two thick borders meet on a zero-size box, the join is a diagonal. With one border coloured and its neighbours transparent, a triangle remains.
Can I make a right triangle?
Yes: use only two adjacent borders, one coloured and one transparent. This tool makes isosceles triangles.
What is an alternative?
clip-path: polygon(50% 0, 0 100%, 100% 100%) on a normal box.
Is this css triangle generator free and private?
Yes. It is free, needs no account and runs in your browser, so the numbers you type are not uploaded or stored.