CSS & Design
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
Ctrl + Enter to run · Recent brings back your last inputs · Everything stays in this browser
FAQ
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.
CSS Minifier & Beautifier
Compress or format CSS
SVG Optimizer
Minify and clean SVG markup
Website Accessibility Audit
Crawl a page for WCAG risks
CSS Grid Generator
Visual grid layout builder
CSS Flexbox Generator
Build flexbox layouts visually with live preview
SVG to CSS Data URI Encoder
SVG 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.