CSS Triangle Generator
Generate pure-CSS triangles (8 directions) using border or clip-path — copy the rule, drop it in.
Preview
.triangle {
width: 0;
height: 0;
border-bottom: 80px solid #5b8def;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}Border-based triangles use a zero-size element with thick colored borders — the transparent sides cancel out, leaving only the colored triangle visible.
How to use
- Pick a direction (▲▼◀▶ or the four corner triangles).
- Set size and colour.
- Optionally toggle clip-path mode for a cleaner alternative.
- Copy the CSS into your project.
About this tool
ShowHide
The classic CSS triangle trick, made adjustable. An element with no width or height but thick borders shows nothing but the corners where those borders meet; make three of them transparent and the fourth becomes a triangle pointing away from the coloured side. This gives you eight directions — the four cardinal ones plus the four right-angled corner shapes — with a size slider and a colour picker. Note that the size here is the border width, since the box itself is zero, which is exactly the awkwardness the clip-path toggle removes: the modern version is a normal box you size with width and height, so it can be scaled, given a border-radius, or animated in ways the border version cannot.
Frequently asked questions
Why does the border trick work?
A 0-width element with thick borders renders as four triangles meeting at a point. Make three transparent and one coloured — only the coloured triangle is visible.
Border vs clip-path?
Border is older (works in IE6) and has tiny anti-aliasing differences. clip-path is cleaner and easier to combine with backgrounds/images — preferred for new code.
Can I rotate the triangle?
For non-standard angles, use clip-path mode and adjust the polygon points. The 8 included directions cover most needs (arrows, tooltips, breadcrumbs).
Browser support?
Border-triangle is universal. clip-path is supported in every browser since 2016 — safe to use anywhere in 2026.
Can I give a border triangle a border or a shadow?
Not directly. The shape is made of borders, so there is nothing left to draw a border with, and a box-shadow follows the element's rectangle rather than the visible triangle. Use the clip-path version when you need an outline or a drop shadow, since a filter-based shadow follows the clipped shape.
Why is the triangle blurry on a high-density screen?
The diagonal edge is the meeting line between two borders, and browsers antialias it differently from a path. It is usually invisible; where it shows, a half-pixel size adjustment or the clip-path version tends to clear it up, because a clipped path is rasterised as one shape rather than two abutting fills.
Related tools
Border Radius Generator
Drag corners independently, try elliptical radii, copy the CSS — with chat-bubble, pill, blob, and tab presets.
Color & CSS
CSS clip-path Builder (Circle, Ellipse, Polygon, Inset)
Visual builder for the CSS clip-path property — circle, ellipse, inset or polygon, with sliders, click-to-add points and 10 shape presets.
Color & CSS
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color & CSS
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color & CSS
CSS Filter Playground
Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.
Color & CSS
CSS Cubic-Bezier Curve Generator
Drag the control points to design a CSS easing curve — preview the motion live, copy the cubic-bezier() value.
Color & CSS