CSS Triangle Generator Formatter🔒 100% local

Create CSS triangles. Privacy-first, no server uploads, no tracking.

Input

CSS Triangle Generator Formatter: related tools

Border Radius Preview Box Shadow Generator Code Heatmap

It writes the border trick for you. Choose one of eight directions, give a size with units and a color, and the page prints a zero-width, zero-height .triangle rule with the transparent borders and the one colored border already set. Edge directions use three borders, corner directions use two.

CSS Triangle Generator: how to use it

Type direction, size, color - for example up, 50px, red.
Give the size a unit; px, em and rem are accepted. A percentage is rejected, because border-width cannot take one.
Press Process and copy the .triangle block into your stylesheet next to a <div class="triangle"></div>.

CSS Triangle Generator: worked example

up, 50px, redbecomes

=== CSS Triangle (up) ===

HTML:  <div class="triangle"></div>

CSS:
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}

How it works: borders with width=0/height=0 collapse into 45° triangles — set 3 transparent + 1 colored.
Cheap triangles work for: tooltips, dropdowns, speech bubbles, fold-corners.
Modern alternative: clip-path: polygon(...) — supports transform/animation & no sizing hack.

Up uses left and right transparent borders plus a colored bottom border.

left, 30px, #333becomes

=== CSS Triangle (left) ===

HTML:  <div class="triangle"></div>

CSS:
.triangle {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 30px solid #333;
}

How it works: borders with width=0/height=0 collapse into 45° triangles — set 3 transparent + 1 colored.
Cheap triangles work for: tooltips, dropdowns, speech bubbles, fold-corners.
Modern alternative: clip-path: polygon(...) — supports transform/animation & no sizing hack.

Left points the colored border at the opposite side from up.

CSS Triangle Generator: when to use it

You are building a tooltip or dropdown arrow and want the border values without working out which side is transparent.
You need a fold-corner or badge notch and want to see the two-border shape for a corner direction.
You are teaching the border-triangle technique and want the rule and the one-line explanation together.

CSS Triangle Generator: what it does not do

Only the first three comma-separated fields are used; anything after the color is ignored.
Borders take part in layout, so the triangle is affected by line-height and margins, and it cannot be transformed or animated smoothly - the output says so and suggests clip-path instead.
Direction names must match the eight listed values exactly; 'north' or 'ne' throws rather than being mapped.
The generated CSS uses the legacy border hack; browsers also need box-sizing: content-box (the default) for the exact size to hold.

✨CSS Triangle Generator Formatter🔒 100% local