ffee
All tools
CSS Triangle Generator
Build a pure CSS triangle or arrow from borders and copy the finished rule.
Build a triangle
Borders: —
Box: — · outline: —
How to use the CSS Triangle Generator
- Choose the direction and pick a triangle or an arrow.
- Set the half width, the outline thickness and the two colours.
- Copy the generated rule and rename the triangle class to match your markup.
Features
- Four directions for triangles and arrows
- Adjustable half width, height ratio and outline thickness
- Separate fill and outline colours with a live preview
- Copyable CSS using the zero size border trick
Advertisement
Frequently Asked Questions
Common questions about the free online css triangle generator.
A box with no width or height and three thick borders draws a triangle, because two
transparent borders cut away everything except one corner.
Give the box a coloured top border and make the left and right borders transparent, which
leaves a triangle pointing towards the bottom.
Draw a second, slightly smaller triangle of the fill colour inside the outer one, which is
what the outline option writes for you.
It is one and a half times the half width, so the shape stays close to an equilateral
triangle at every size.
Add a rectangular shaft next to the triangle. The arrow option writes a container for the
shaft and a pseudo-element for the head.
One of the transparent sides is probably missing. All three borders must be present, two of
them transparent, for the corner to show.
Yes. Position the triangle absolutely against the tooltip box, with the matching direction,
and give the tooltip a matching background.
Yes. It is completely free, runs locally in your browser and needs no account, no sign-up and
no upload.
Last updated: October 10, 2026