CSS Triangle Generator

Choose which way the triangle points, how wide its base is, how tall it is and what color it is. The tool writes the five-line border rule that draws it.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Live preview

CSS

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 60px 40px;
  border-color: transparent transparent #4f46e5 transparent;
}

How it works. A zero-sized box still paints four border wedges that meet at 45 degrees. Making three of them transparent leaves a single triangle.

Quick answers

How do you make a triangle in CSS?: Give an element width: 0 and height: 0, set border-style: solid, then give one border a color and make the two borders beside it transparent. For an upward triangle 80px wide and 60px tall: border-width: 0 40px 60px 40px with only the bottom border colored.
Which border do I color for each direction?: Color the border opposite the point. A triangle pointing up uses the bottom border, pointing down uses the top border, pointing left uses the right border and pointing right uses the left border.
How do I set the size of a CSS triangle?: The colored border's width is the triangle's height. The two transparent borders beside it each equal half the base. A base of 16px and height of 10px pointing up is border-width: 0 8px 10px 8px.
Why does a CSS triangle need zero width and height?: With no content box the borders meet at a single point, so each one is a triangle. Give the element any width or height and the borders are pushed apart, turning the colored one into a trapezoid with a flat tip.
Can I add a box-shadow to a CSS triangle?: Not usefully. box-shadow follows the element's rectangular box, not the visible triangle. Use filter: drop-shadow() instead, which follows the painted shape, and apply it to the parent if the triangle is a tooltip arrow.

Why use CSS Triangle Generator

A CSS triangle is an element with no width and no height whose borders do all the drawing: one border is colored and becomes the triangle, and the borders next to it are transparent and cut its slanted edges. This generator writes the border-width and border-color values for a triangle pointing up, down, left or right. Base width and Height each run from 10 to 200 pixels in steps of 2. The base is split into two equal side borders and the height becomes the single colored border, so the result is always an isosceles triangle with its point centered on the base.

CSS triangle code for up, down, left and right

Generated with Base width 80, Height 60 and the default color #4f46e5. border-width and border-color list their values in the order top, right, bottom, left.

Points towards	border-width	border-color
Up	0 40px 60px 40px	transparent transparent #4f46e5 transparent
Down	60px 40px 0 40px	#4f46e5 transparent transparent transparent
Left	40px 60px 40px 0	transparent #4f46e5 transparent transparent
Right	40px 0 40px 60px	transparent transparent transparent #4f46e5

Every rule also contains width: 0; height: 0; border-style: solid;

How base width and height map to border widths

colored border = Height; each adjacent border = Base width / 2; border on the pointing side = 0

For a triangle pointing up with Base width 80 and Height 60, the bottom border is 60px, the left and right borders are 40px each and the top border is 0. The element's outer box ends up exactly Base width by Height (80 by 60 pixels), which is the space the triangle takes in the layout. For left and right triangles the roles swap: Height becomes the horizontal border and Base width is split between the top and bottom borders.

Tooltip arrow, dropdown caret and other common sizes

Each result is the tool's output for those settings.

Arrow under a dark tooltip

Points towards Down, Colour #333333, Base width 12, Height 10

border-width: 10px 6px 0 6px; border-color: #333333 transparent transparent transparent;

Match Colour to the tooltip background so the arrow reads as part of it.

Caret on top of a dropdown menu

Points towards Up, Colour #1f2937, Base width 16, Height 10

border-width: 0 8px 10px 8px; border-color: transparent transparent #1f2937 transparent;

Tail on the left side of a chat bubble

Points towards Left, Colour #e5e7eb, Base width 24, Height 14

border-width: 12px 14px 12px 0; border-color: transparent #e5e7eb transparent transparent;

Play-style arrow pointing right

Points towards Right, Colour #ffffff, Base width 20, Height 12

border-width: 10px 0 10px 12px; border-color: transparent transparent transparent #ffffff;

Close to equilateral

Points towards Up, Base width 100, Height 86

border-width: 0 50px 86px 50px;

An equilateral triangle's height is about 0.866 times its side, so 86 is the nearest slider value for a 100px base.

Right angle at the point

Points towards Up, Base width 100, Height 50

border-width: 0 50px 50px 50px;

When Height is half of Base width, the two slanted edges meet at 90 degrees.

Attaching the triangle to a tooltip with ::after

The usual place for a generated triangle is a pseudo-element, so no extra markup is needed. Give the tooltip position: relative, then paste the five generated declarations into .tooltip::after along with content: "" and position: absolute.

For an arrow under the tooltip, generate a triangle that points Down and add top: 100%; left: 50%; transform: translateX(-50%). The top: 100% puts the arrow's flat side against the tooltip's bottom edge and the translate centers it. For an arrow above the tooltip, generate Up and use bottom: 100% instead. For side arrows, generate Left or Right and use right: 100% or left: 100% with top: 50% and transform: translateY(-50%).

To give the arrow an outline that matches a bordered tooltip, use both pseudo-elements: ::before holds a triangle in the border color, and ::after holds the fill-colored triangle offset by the border thickness toward the tooltip so that only a thin edge of the first one shows.

Border triangle vs clip-path vs SVG

Method	Needs a sized element	Can hold a gradient or image	Good for
Border trick (this tool)	No, width and height are 0	No, solid color only	Small carets and tooltip arrows on pseudo-elements
clip-path: polygon(50% 0, 100% 100%, 0 100%)	Yes	Yes	Larger shapes, responsive sizes, shapes that animate
Inline SVG polygon	Yes	Yes, plus strokes	Icons and triangles that need a real outline

This generator outputs the border method only.

What this generator does not produce

Corner triangles. Diagonal directions such as top-left are not offered. By hand, a 100px right-angled triangle in the top-left corner is border-width: 100px 100px 0 0 with border-color set to your color followed by three transparent values.
Uneven triangles. The point is always centered over the base, so scalene shapes need different left and right border widths typed in manually.
Units other than px. Swap in em or rem after copying if the arrow should scale with text.
Semi-transparent fills. Colour outputs an opaque hex value; replace it with an rgba() value by hand if needed.
Outlines and shadows. Use the stacked pseudo-element approach or filter: drop-shadow() described above.

Step by step

1
Choose a direction in Points towards: Up, Down, Left or Right.
2
Pick the fill with Colour. The output uses a six-digit hex value.
3
Set Base width, the length of the flat side opposite the point.
4
Set Height, the distance from the base to the point.
5
Copy or download the .triangle rule from the CSS panel and rename the selector, for example to .tooltip::after.

Questions people ask

How much space does a CSS triangle take up in the layout?

A rectangle of base width by height. The content box is zero, but borders still count toward the element's size, so an 80 by 60 triangle occupies 80 by 60 pixels. Absolutely positioned pseudo-elements take no space in the flow at all.

Should I use a div or a pseudo-element for the triangle?

A ::before or ::after pseudo-element is usually better because the arrow is decoration and keeps the HTML free of empty elements. Remember content: "", or the pseudo-element is not rendered.

Why does my triangle look like a square or a trapezoid?

Either the element has a width, height or min-width from another rule, or all four borders are colored. Check that width and height are 0, that the element is not stretched by a flex or grid parent, and that three of the four border colors are transparent.

Does a CSS triangle work on inline elements?

Set display: block or inline-block. A non-replaced inline element such as a bare span ignores width and height, and its line height gets in the way of a clean shape.

Is the border trick still a good idea now that clip-path exists?

For small solid arrows, yes: it is five declarations, needs no dimensions and works in every browser. Choose clip-path when the triangle is large, needs a gradient or image, or must change shape on hover.

Can I rotate a generated triangle to point diagonally?

Yes. Add transform: rotate(45deg) to the rule to turn an upward triangle toward the top right. The layout box does not rotate with it, so adjust the position offsets by eye.

Why are the edges of my triangle jagged or blurry?

Slanted border joins are anti-aliased, and very steep or very shallow triangles show it most. Keeping the base an even number of pixels helps, because each half then lands on a whole pixel; the Base width slider moves in steps of 2, so its halves always do.