Make a triangle with the classic border trick — no images. Choose the direction, size and colour, preview it live, and copy the CSS. Handy for tooltips, carets and dropdown arrows. Runs in your browser.
CSS Triangle Generator is a quick, no-nonsense developer utility that runs entirely client-side, so your code and data never leave your machine.
The border trick creates a triangle with zero width/height and transparent sides — a lightweight, image-free technique.
Not with this method; use clip-path for gradient triangles.
No — generated locally.
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 120px solid #6366f1;