← All Tools
CSS Triangle Generator Formatter🔒 100% local
Create CSS triangles. Privacy-first, no server uploads, no tracking.
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.
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>.
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.
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.
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.