CSS Triangle Generator

Build a triangle in CSS without the border trick. Drag the tip, pick a direction, and copy a clip-path rule that scales with the element and takes a background like any other box.

About the CSS triangle

For years, a triangle in CSS meant the border hack: give an element no width and no height, make two borders transparent and the third solid, and the corner mitres do the rest. It works, it is famous, and it is a trick - the "triangle" is a border, so it cannot hold text, cannot take a background image, and has to be resized in pixels by rewriting three numbers at once.

clip-path replaced it. You describe three corners and the browser clips the box to them. The result is a real element: it accepts a gradient, an image, a transition, and it is sized in percentages, so it stretches with whatever contains it.

The code

.shape {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  width: 240px;
  height: 240px;
  background: #0d6efd;
}

Three coordinate pairs, each one x y measured from the top-left corner of the element. 50% 0% is the apex, centred on the top edge; 100% 100% and 0% 100% are the two bottom corners. Move the apex to 0% 0% and you have a right triangle; drag it past the edge and you get a lopsided one. Because every number is a percentage, the same rule works at 24 pixels and at 800.

Pointing it the other way

Down - polygon(0% 0%, 100% 0%, 50% 100%), the caret under a dropdown.
Right - polygon(0% 0%, 100% 50%, 0% 100%), a play button.
Left - polygon(0% 50%, 100% 0%, 100% 100%).
Right-angled - polygon(0% 0%, 100% 100%, 0% 100%), for a corner ribbon or a page-fold effect.

Each one opens in the studio ready to edit, and the rotation slider on this page covers everything between them.

An equilateral triangle

The triangle fills whatever box you give it, so a square box produces an isosceles triangle, not an equilateral one. In an equilateral triangle the height is √3 / 2 of the base - about 0.866 - so the box has to be that much shorter than it is wide. The clip-path does not change; you add one line:

.shape {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  width: 240px;
  aspect-ratio: 1 / 0.866;
  background: #0d6efd;
}

Use aspect-ratio rather than a fixed height and the triangle stays equilateral at every width.

Frequently asked questions

Should I still use the border trick for triangles?

Only for the one thing it is still good at: a tiny arrow drawn entirely by a pseudo-element, where you want no extra box in the layout at all. For anything you can see, clip-path is easier to read, easier to change and does not fall apart when the design asks for a gradient.

Why does my triangle have no shadow?

box-shadow follows the element's border box, not its clip, so the shadow is drawn as a rectangle and then clipped away with everything else outside the triangle. Put filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)) on a wrapper element instead - that follows the visible silhouette.

Can I put a border on a clipped triangle?

Not with border, which is drawn on the box and clipped away with it - but yes, and the Border control does it for you. The rule it writes puts the border color on the element and the same triangle, inset by the border width, on a ::after on top of it. Two layers, still one element in your markup. The inset triangle is a true offset rather than a scaled-down copy, so the ring measures the same all the way round instead of thinning on the sloping sides.

Does the text inside stay visible?

Only the part inside the triangle. Clipping applies to children too, so text near the sloping edges gets cut off. For a triangle behind content, put the shape on a background element and let the text sit in a normal box above it.

Menu