Developer ToolsCSS ToolsFree Tool
CSS Triangle Generator
Build a real, working CSS-only triangle using the border trick, in your chosen direction, size, and color.
How to Use CSS Triangle Generator
- 1Enter direction, size, color — comma-separated (e.g. down,20,#4F46E5)
- 2Click Process
- 3Copy the width/height/border CSS for the triangle
Frequently Asked Questions
It's the classic 'border trick': a zero-width, zero-height element with three transparent border sides and one colored side — the colored side renders as a triangle where the borders meet at a point.
Four: down, up, left, right — enter one of these words (defaults to 'down' if omitted or unrecognized).
3 comma-separated values: direction, size in px (defaults to 20), and color (defaults to #4F46E5).
No — only the 4 cardinal directions are supported by this tool's fixed border combinations.
Related Tools
CSS Minifier
A developer-tools-side CSS minifier — strips comments, collapses whitespace, and trims spacing around punctuation, part of ToolHive's CSS/SCSS/LESS toolset alongside the beautifier and preprocessor converters.
CSS Beautifier
Reformat minified or messy CSS with a newline after each rule, selector, and declaration — the same logic as the CSS Prettifier tool.
CSS to SASS
Get a lightly restructured starting point for SCSS conversion — not a real CSS-to-SCSS transpiler with nesting or variable extraction.
SASS to CSS
Get a basic structural cleanup of SASS/SCSS — not a real Sass compiler. Variables and nesting are not resolved.