HTMLCSS 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
Repeating this work? Turn this kind of browser utility into an API batch, MCP prompt, extension workflow, or shared team recipe.
Buy Pro Browse tool packsFAQ
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.