Log in Start free

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.

Runs in your browser Nothing uploaded Free, no signup

Everything stays in this browser

CSS Triangle Generator: questions

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.
All 112 free tools
CSS Minifier & BeautifierCompress or format CSS SVG OptimizerMinify and clean SVG markup Website Accessibility AuditCrawl a page for WCAG risks CSS Grid GeneratorVisual grid layout builder CSS Flexbox GeneratorBuild flexbox layouts visually with live preview SVG to CSS Data URI EncoderSVG as background-image

Made something with AI? Share it as a private link.

Drop in the HTML from Claude, ChatGPT or any editor and get a link your client can open anywhere — with a password, view tracking, comments and approval.

Publish your HTML HTML to link