CSS Triangle Generator
NEWGenerate pure-CSS triangles with the border trick — pick a direction, size and color, then copy the CSS.
Diagonal (corner) triangles are right-angled and ignore the separate height value, using the width for both sides.
Preview
CSS
How to use CSS Triangle Generator
- Choose a direction — up, down, left, right, or one of the four diagonal corners.
- Set the width and height to control the triangle's base and point.
- Pick the fill color for the visible side of the triangle.
- Click Copy CSS to copy the width, height and border declarations.
What is CSS Triangle Generator?
A pure-CSS triangle is made by giving a zero-size element thick borders and then making three of those borders transparent. Where the colored border meets the transparent ones, the diagonal seams form a triangle — no images or SVG needed.
This generator handles the math for you: choose one of eight directions (the four sides plus four right-angled corners), set the width, height and color, and copy the resulting width: 0; height: 0; and border-* declarations straight into your stylesheet.
FAQ
- How does the CSS border triangle trick work?
- An element with width 0 and height 0 still renders its borders, which meet at 45-degree diagonal seams. Coloring one border and making the other three transparent leaves a single triangular shape, with its point opposite the colored side.
- Why are corner triangles right-angled?
- Diagonal directions use only two adjacent borders, so the triangle has a square corner where those borders meet. Because both sides come from the same border width, corner triangles use the width value for both legs and ignore the separate height.
- How do I change the triangle's size?
- Adjust the width and height: a larger colored border makes the triangle longer in that direction, while the transparent borders set the width of the base. The tool updates the border values for you as you drag the sliders.
Related tools
People also use
- Border Radius Generator🗄️ Developer Tools
Visually craft CSS border-radius — independent corners, px/%/em units, and organic blob shapes. Live preview and copy-paste CSS. Runs in your browser.
- Clip Path Generator🗄️ Developer Tools
Create CSS clip-path shapes visually — polygons, circles, insets and 20+ presets with draggable points. Live preview and copy-paste CSS, in your browser.
- CSS Button Generator🗄️ Developer Tools
Design a CSS button visually — padding, colors, gradients, border-radius, shadow and hover effects — with a live preview, then copy the CSS. In-browser.
Last updated: