CSS Triangle Generator
CSS triangles in eight directions using the border trick or clip-path.
About this tool
Pick a direction from the arrow pad: up, down, left, right or any of the four corners. Set the width, height and colour, and choose the border trick or clip-path. The triangle previews live and the CSS is ready to copy.
Two ways to draw a triangle in CSS
The classic method uses borders. An element with no width or height but thick borders shows four triangles where the borders meet at diagonal joins. Colour one border and make its neighbours transparent and only one triangle remains. For an upward triangle 120 pixels wide and 100 tall, the bottom border is 100px in your colour and the left and right borders are 60px each, transparent. This works in every browser and suits ::before and ::after pseudo-elements, which is how most tooltip arrows and speech-bubble tails are made. The modern method draws an ordinary box and cuts it to shape with clip-path: polygon(). For an upward triangle the polygon is 50% 0, 100% 100%, 0 100%. Clip-path allows gradients, images and smooth transitions, but box-shadow is clipped away with it, so use filter: drop-shadow() if you need a shadow. Corner triangles are useful for ribbons, folded-corner effects and decorative section dividers. The clip-path generator makes other polygons, the CSS button generator styles the element an arrow points to and the box-shadow generator adds depth.
Frequently asked questions
How do I make a triangle in CSS?
Give an element width: 0 and height: 0, then thick borders where one side has a colour and the two sides next to it are transparent. Or use clip-path: polygon() on a normal box.
How do I add a shadow to a CSS triangle?
box-shadow follows the element's box, not the triangle. Use filter: drop-shadow() instead, which follows the visible shape.
How do I make a tooltip arrow?
Add a triangle on the tooltip's ::after pseudo-element, positioned at the edge, using the border trick with the tooltip's background colour.
Is my design saved?
No. Everything runs in your browser and nothing is stored or sent.