.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid #6366f1;
}Direction: Up
Method
Use as
Width100px
Height80px
Equilateral (for up, down, left, right)
How to use
01
Pick a direction
Click one of the eight arrows in the direction picker. Up, down, left and right make isosceles triangles; the corner directions make right-angled ones.
02
Set size, color and method
Drag Width and Height, or switch on Equilateral, and choose a color. Pick Border trick or clip-path, and Shape or Tooltip arrow.
03
Copy the code
Pick CSS, HTML, CSS + HTML or Tailwind and press Copy or Download. Copy share link saves the settings in a URL.
Why CSS Triangle Generator
- Eight directions, including right-angled corner triangles.
- Border trick or clip-path output, with exact sizes and an equilateral option.
- A tooltip arrow mode that writes the ::after rule and its position.
- CSS, HTML and Tailwind output with a live preview.
Border widths for each direction
For a triangle of width W and height H, the border trick sets these borders on a zero-size box. The colored border is the one opposite the point.
| Direction | Colored border | Transparent borders |
|---|---|---|
| Up | border-bottom: H | border-left and border-right: W / 2 |
| Down | border-top: H | border-left and border-right: W / 2 |
| Left | border-right: W | border-top and border-bottom: H / 2 |
| Right | border-left: W | border-top and border-bottom: H / 2 |
| Up left | border-top: H | border-right: W |
| Down right | border-bottom: H | border-left: W |
The same triangles with clip-path
With clip-path the box keeps its real size and the polygon cuts it. Percentages keep the shape correct at any size.
- Up: polygon(50% 0, 100% 100%, 0 100%)
- Down: polygon(0 0, 100% 0, 50% 100%)
- Left: polygon(0 50%, 100% 0, 100% 100%)
- Right: polygon(0 0, 100% 50%, 0 100%)
Common questions
How does the CSS border triangle trick work?
A box with zero width and height still draws its borders, and where two borders meet they are cut at a diagonal. Make three borders, or two for a corner triangle, and color only one of them; the transparent ones hide the rest, leaving a triangle. The colored border's width sets the triangle's height.
Should I use borders or clip-path for a CSS triangle?
clip-path gives a normal box with a real width and height, so it can have a gradient or image background and is easier to size. The border trick works in every browser, including very old ones, and is still common for tooltip arrows. Both are available here.
How do I make an equilateral triangle in CSS?
All sides equal means the height is the width times the square root of 3, divided by 2, about 0.866. Switch on Equilateral and the tool sets the height from the width for up and down triangles, or the width from the height for left and right.
How do I add an arrow to a tooltip with CSS?
Choose Tooltip arrow. The output gives the tooltip position: relative and adds a ::after pseudo-element with content, absolute position and the triangle. For a down arrow it sits at top: 100% and is centered with left: 50% and translateX(-50%), so it points at the element below.
Can a CSS triangle have a border or outline?
Not directly with the border trick, since the borders are the triangle. Layer two triangles instead: a slightly larger one in the outline color behind a smaller one in the fill color, often with ::before and ::after. With clip-path, a drop-shadow filter on a wrapper can add a soft edge.
Can I rotate a CSS triangle to any angle?
Yes. Build it pointing up and add a transform such as rotate(30deg). For the eight standard directions, picking the direction here gives cleaner code than a rotation, and it keeps the box aligned with the page.
Why does my border triangle look blurry or jagged?
Diagonal edges are anti-aliased, and at odd sizes or on scaled elements they can look soft. Use whole pixel sizes, avoid scaling the triangle with transform, or switch to clip-path, which browsers render slightly differently.
How do I write a CSS triangle in Tailwind?
The Tailwind tab writes either w-0 h-0 with border width and color classes such as border-b-[80px] border-b-[#6366f1] and transparent sides, or a sized box with bg-[...] and a [clip-path:polygon(...)] class.