CSS Triangle Generator
Create CSS triangles using the classic border-trick technique — no images, no SVG, no pseudo-elements needed. Choose direction (up, down, left, right, and four diagonals), size, and color. See the triangle live and copy the exact CSS snippet ready to paste.
Ctrl+Enter to run · Ctrl+K to switch tools · Recent button shows input history
Let AI do the hard part. Fix broken HTML, convert to email-safe HTML, or clean up any markup in one click — 3 free AI runs per day, no account needed.
Try the AI HTML FixerFAQ
How does the CSS triangle trick work?
An element with zero width/height and thick transparent borders will show only the one colored border, which appears as a triangle. The colored side's adjacent borders must be transparent.
Can I make a right-angle triangle?
Yes — choose any of the four diagonal directions (up-left, up-right, down-left, down-right) to get a right-angle triangle that fills one quadrant.
Will it work on all browsers?
Yes — the border-trick works in every browser including IE 6+. It is one of the oldest CSS techniques and has universal support.