CSS Triangle Generator

Make CSS triangles with the border trick.

Direction

Size · 40pxColor

.triangle {
  width: 0;
  height: 0;
  border-right: 40px solid transparent;
  border-bottom: 60px solid #6f4dff;
  border-left: 40px solid transparent;
}

Free CSS triangle generator. Choose a direction, size and color to create a pure-CSS triangle using the border trick, preview it live, and copy the CSS. Great for tooltips and arrows. Runs in your browser.

How to use the CSS Triangle Generator

01Choose which way the triangle points.
02Set the size and fill color.
03Copy the generated CSS class.

Frequently asked questions

How does a CSS triangle work with no SVG?

An element with zero width and height but thick borders shows only the borders as triangles. Making three borders transparent leaves one visible triangle — that's the classic border trick this tool generates.