CSS Triangle Generator
Generate CSS triangles with the border trick in 8 directions, live preview and clip-path
Why a border makes a triangle
An element with width:0 and height:0 has no content box, so its four borders meet at a single point and the browser paints each one as a wedge.
Make three of them transparent and a single triangle survives. Its base equals the sum of the two neighbouring border widths, and its height equals the width of the border itself.
That is why an upward triangle uses left and right borders of exactly half the width, and the element border box ends up exactly width by height.
The RTL caveat
border-left and border-right are physical: they do not swap when the page becomes RTL, so a triangle pointing right in an LTR layout still points right in an RTL one.
If the triangle is a next arrow or a dropdown caret, turn on logical properties: the output then uses border-inline-start and border-inline-end and mirrors with the text direction. For a tooltip arrow pinned to a fixed edge, keep the physical version.
About CSS Triangle Generator
A CSS triangle is not a shape at all — it is one border of a zero-sized box. Set width and height to 0 and the four borders collapse to a single point, so the browser paints each one as a wedge; make three transparent and a single triangle is left. That is why an 80px-wide upward triangle needs left and right borders of 40px each, not 80px.
How to use CSS Triangle Generator
- 1
Pick a direction in the 3×3 grid — four straight arrows plus four corner triangles.
- 2
Set width and height with the sliders or number boxes, or tick lock proportion for an equilateral triangle (45 degrees for the corner shapes).
- 3
Choose a fill color with the picker or type a hex code, and rename the output selector if you want.
- 4
Turn on logical properties if the arrow must mirror on RTL pages.
- 5
Copy the border CSS, or the clip-path version next to it.
Frequently asked questions
Why is my CSS triangle not showing up?
Almost always because the element still has a width and a height. The triangle's size comes only from the border widths, so with real dimensions you get a box with bevelled corners instead. Also make sure the unused borders are transparent rather than removed.
Can I put a gradient or an outline on a CSS border triangle?
No. The triangle is painted by a border color, so it accepts exactly one flat color and border-radius has no effect on it. Use the clip-path output for gradients and images; for an outlined triangle, stack a slightly larger triangle behind a smaller one.
Does the triangle flip on RTL pages?
Not with the default output — border-left and border-right are physical and never swap. Enable logical properties and the tool emits border-inline-start and border-inline-end, which mirror with the text direction.
What are the limits of this generator?
It produces flat single-color triangles up to 300px in eight fixed directions. Arbitrary angles, rounded tips and rotated triangles are out of scope — use SVG or a CSS transform for those.