Free Online CSS Triangle Generator
Generate pure CSS triangles and arrows with the right border widths.
CSS triangles are made with zero width and height plus transparent borders. They are lightweight and scale cleanly with the border width.
About the CSS Triangle Generator
This generator writes the border trick that produces a triangle with no images and no SVG. Choose a direction, size, and colour, and it outputs a rule with zero width and height plus transparent side borders. The preview updates as you change the controls, and Copy CSS puts the finished block on your clipboard.
It is for developers who want a lightweight arrow for tooltips, dropdown carets, and breadcrumb markers, and for anyone who would rather not add an icon font for a single shape.
How to use it
- Choose up, down, left, or right.
- Set the size in pixels, from 4 to 200.
- Pick the colour. Only the solid border takes the colour; the other two stay transparent.
- Copy the generated .triangle rule and rename the class to suit your markup.
Example: a tooltip arrow
A tooltip needs a small pointer on its bottom edge. Set direction to down, size to 6, and colour to the same value as the tooltip background. The output uses a 6 px top border in that colour with 6 px transparent left and right borders, producing a 12 px wide, 6 px tall triangle. Position it with absolute coordinates just below the bubble. For a larger decorative shape, raise the size to 40 and the same rule scales without blurring.
What it can and cannot do
Every triangle here is isosceles with 45 degree sides, so there are no arbitrary angles, skews, or right-angled variants. The total width is twice the size value while the height equals the size, which surprises people measuring the preview. Rotation is possible by adding a CSS transform to the copied rule, but the tool does not generate it. Some browsers show faint anti-aliasing on the diagonal edges at small sizes. The rule is plain CSS with no positioning, so you still place the element yourself. Nothing is calculated on a server and no values are saved between visits.
Frequently asked questions
Why is my triangle twice as wide as its size?
The size sets each of the two transparent side borders, and together they form the base. Set size to 6 and the base is 12 px.
Can I rotate a triangle to point diagonally?
Yes, add transform: rotate(45deg) to the copied rule. The generator itself only emits the four cardinal directions.
Can I use this inside a pseudo-element?
Yes. Apply the border values to a ::before or ::after rule with content set to an empty string and display block.
Related tools: CSS Clip Path Generator, Border Radius Generator, Box Shadow Generator.