CSS Triangle Generator
Choose a direction, a width and a height and a colour. Pick the classic border method or the newer clip-path method.
Worked examples
A triangle pointing up
Width 100px, height 50px, colour #ff4a1f, borders
border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #ff4a1f;
The side borders are half the width, and the coloured border is the height.
About CSS Triangle Generator
Triangles are everywhere in interfaces: arrows on dropdowns, tails on tooltips, folded corners on cards. You can draw one in pure CSS without an image, but the border method is hard to remember and easy to get backwards. This generator works out the borders for any of eight directions and shows the result.
Choose a direction, a width and height and a colour, then pick the method. The border method works in every browser and needs no extra markup. The clip-path method uses a normal box with a background, so it can take a gradient. Both give the same shape.
How to use CSS Triangle Generator
- Choose the direction the triangle points.
- Set the width, the height and the colour.
- Pick the border method or clip-path.
- Copy the CSS and the HTML.
Common uses
- Adding an arrow to a tooltip or popover
- Drawing the caret on a dropdown menu
- Folding the corner of a card
- Making a chevron or play icon without an image
Frequently asked questions
How does the border trick work?
An element with no width or height shows only its borders. Where two borders meet, the join is a diagonal. Colouring one border and making its neighbours transparent leaves a triangle in the colour of the visible border.
Which method should I choose?
Use borders when you need the widest support and a single flat colour. Use clip-path when you want a gradient or image inside the triangle, or when you find the code easier to read.
What do the corner directions give me?
A right-angled triangle that fills one corner of its box, such as the top left. They are useful for folded corners and diagonal splits.
Why does the clip-path version lose shadows?
Clip-path hides everything outside the shape, including shadows and borders. To give a clipped triangle a shadow, add the shadow to a wrapper element instead.