CSS triangle generator
Generate pure CSS triangles with the border trick: up/down/left/right and four corner directions, equilateral sizing (height = width × √3 / 2), an optional two-layer bordered triangle, live preview plus CSS and HTML output.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Direction
Effective height：103.92px
Color & border
Preview
Rendered at 1:1 pixels so you can check the size
CSS
.triangle {
position: relative;
display: inline-block;
width: 120px;
height: 103.92px;
}
.triangle__fill {
position: absolute;
top: 0px;
left: 0px;
width: 0;
height: 0;
border-right: 60px solid transparent;
border-bottom: 103.92px solid #3B82F6;
border-left: 60px solid transparent;
}HTML
<div class="triangle"> <div class="triangle__fill"></div> </div>
What this tool does
- Build tooltip bubbles, dropdown arrows and breadcrumb separators as pure CSS border triangles instead of shipping images or SVG.
- See all eight directions at once — up, down, left, right plus the four corners — and take the CSS for the one you need.
- Need an equilateral triangle? Tick the option and the height is derived from width × √3 / 2 so you never have to remember the constant.
- For an outlined triangle, enable the two-layer mode: the outer layer paints the border colour and the inset inner layer paints the fill, saving you from deriving the inset yourself.
Example
Input
Direction "up", width 80px, height 60px, fill #6366F1, no border
Output
.triangle {
position: relative;
display: inline-block;
width: 80px;
height: 60px;
}
.triangle__fill {
position: absolute;
top: 0px;
left: 0px;
width: 0;
height: 0;
border-right: 40px solid transparent;
border-bottom: 60px solid #6366F1;
border-left: 40px solid transparent;
}The two transparent side borders each take half the base (40px) and the point is coloured by border-bottom; the HTML is <div class="triangle"><div class="triangle__fill"></div></div>.
Frequently asked questions
How is the equilateral height calculated?
Height = width × √3 ÷ 2, rounded to two decimals: a 120px width yields 103.92px. Corner directions (top-left, bottom-right and so on, where the right angle sits in a corner) cannot be equilateral, so the option is ignored and your entered height is used.
How does the bordered triangle work?
Two absolutely positioned triangles: the outer one draws the whole shape in the border colour, and an inset inner one draws it again in the fill colour, leaving only a rim visible. For corner directions the inset is scaled by √2 to follow the 45° normal distance.
Why can the border width not be too large?
The inner triangle must shrink along both the base and the height. Once the border is thicker than the shape can absorb, the inner base or height would drop to zero or below, and the tool reports "border too wide" rather than emitting an invisible triangle.
Which colour formats are accepted?
#RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb()/rgba()/hsl()/hsla() and a small set of keywords such as black, white, red and transparent. The check is a whitelist so arbitrary strings never end up in the CSS.
How is this different from clip-path triangles?
The border trick has the widest compatibility, works in older browsers and gives naturally anti-aliased edges; clip-path is more flexible for arbitrary polygons but may need prefixes in older engines. If a plain triangle is all you need, the border approach is the least fuss.
Keywords：css trianglecss 三角形triangle generator三角形生成器border trick边框三角形箭头arrowequilateral triangle等边三角形bordered triangle带边框三角形