CSS triangle generator
Border-based triangles in any direction and size.
FreeRuns in your browserNo signupUpdated 2026-10-29
Width is the base and height the point for up and down; swapped for left and right.
Preview
.triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 24px solid #2f6bff;
}.triangle-alt {
width: 40px;
height: 24px;
background: #2f6bff;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This css triangle generator writes the classic border trick for drawing triangles in pure CSS: an element with zero width and height, where borders meet at angles and only one of them has a colour. Choose any of eight directions, including the four corners, and set the width, height and colour. It also writes a clip-path version, which is easier to read and can hold a gradient or background image.
How to use it
- Choose the direction the triangle should point.
- Set the width and height in pixels. For up and down, the width is the base; for left and right, the height is.
- Pick a colour with the picker or type a hex value.
- Copy the border version for tooltips and arrows, or the clip-path version if you need a gradient or image fill.
How to read the result
The default, an upward triangle 40px wide and 24px tall, comes out as three borders on a zero-size box: border-left: 20px solid transparent, border-right: 20px solid transparent and border-bottom: 24px solid #2f6bff. The left and right borders are each half the width and invisible. The bottom border sets the height and carries the colour. Where they meet, the browser draws diagonal joins, and the coloured part is a triangle.
For an equilateral triangle, make the height 0.866 times the width. With a 40px base that is about 34.6px.
Corner directions need only two borders. A top-left triangle 40px by 24px is border-top: 24px solid plus border-right: 40px solid transparent, which leaves a right-angled triangle in the corner.
The clip-path version is a real 40px by 24px box with clip-path: polygon(50% 0, 100% 100%, 0 100%). It takes up the expected space in the layout and can have a gradient background, which the border version cannot.
Pair the triangle with a soft shadow from the box shadow generator for a finished tooltip. See website design and development for complete interface work.
Questions
Frequently asked.
How do I add a triangle to a tooltip?
Put the triangle on a ::before or ::after pseudo-element of the tooltip, with content set to an empty string and position absolute. Place it just outside the box, which for a tooltip above its target means top: 100%, then centre it with left: 50% and a negative margin of half its width.
Should I use borders or clip-path?
Borders are the traditional approach and work well for solid colours. Clip-path is easier to read, keeps the element a normal box in the layout, and can show gradients or images. Both are supported in every current browser, so choose based on the fill you need.
More in Design & CSS
Related tools.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide