Triangle Generator

Generate pure CSS triangles using border techniques.

Triangle Settings

Direction

Size50px

Color

Preview

Generated CSS & HTML

.triangle {
  width: 0;
  height: 0;
  borderTop: 50px solid #6366f1;
  borderRight: 50px solid transparent;
  borderBottom: 50px solid transparent;
  borderLeft: 50px solid transparent;

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Triangle Generator?

Generate CSS triangles using the border technique. Pick direction, size, and colour, then copy the minimal CSS with no extra HTML elements.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Triangle Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Pick direction and size

Click the direction arrows (up, down, left, right, or diagonal) and set the size in pixels.

Set the colour

Pick the triangle colour. The two adjacent borders are set to transparent automatically.

Copy the CSS

Click Copy to grab the minimal border-trick CSS. No extra HTML elements needed.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

/* Triangle pointing down */
.triangle-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 24px solid #6C2EF5;
}

/* Triangle pointing right */
.triangle-right {
  width: 0; height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 20px solid #6C2EF5;
}

/* Tooltip arrow using ::before */
.tooltip::before {
  content: '';
  display: block;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid #1e293b;
  margin: 0 auto;
}

CSS triangles work by giving an element zero width and height, then setting one coloured border and two transparent borders.

Pro tips

Pro tips for better results

★

Use clip-path for triangles when you need more control

clip-path: polygon(50% 0%, 0% 100%, 100% 100%) creates a triangle that can have a background, border, and shadow. The border trick only works on solid colour triangles.

★

Transparent must match the background colour for IE11

On older IE, transparent borders render as black on some elements. If you need IE11 support, set the transparent borders to your background colour explicitly.

★

CSS triangles work as pseudo-elements for tooltip arrows

Use .tooltip::before or .tooltip::after with the triangle CSS to add directional arrows without extra HTML markup.

FAQ

Frequently asked questions

When an element has zero width and height, its borders meet at a point in the centre. Setting two adjacent borders to transparent reveals one triangular section of the remaining border. The coloured border becomes the visible triangle.

No. Everything runs in your browser. Nothing is sent to a server.