ZeroTool Workbench
CSS Triangle Generator
Generate CSS triangles in any direction using the border hack. Pick direction, size, and color — get ready-to-use CSS code instantly. Free online tool.
How to Use
- Click a direction button in the 3×3 grid to choose which way the triangle points.
- Set Width and Height in pixels to control the triangle dimensions.
- Pick a color using the color picker or type a hex value directly.
- The live preview updates instantly with a contrasting background so you can see the triangle clearly in both light and dark modes.
- Click Copy next to the CSS block to copy the
.triangle { … }rule, or copy the HTML usage snippet separately.
Understanding the Generated CSS
The generated rule always starts with width: 0 and height: 0.
For cardinal directions (top, right, bottom, left), two transparent borders define the base width
and one solid border defines the height of the triangle.
For corner directions (e.g. top-left), one solid border and one transparent border
form a right-angle triangle from a corner.
Paste the output into your stylesheet and rename .triangle to your own class.
Common Use Cases
CSS triangles are used as tooltip arrows, dropdown caret indicators, decorative section dividers, breadcrumb separators, and speech-bubble tails. Because they are pure CSS with no images, they load instantly and are easy to theme with CSS variables.
FAQ
How does the CSS triangle trick work?
CSS triangles are created by setting an element's width and height to 0 and using borders to form the shape. When adjacent borders meet at transparent angles they create visible triangle shapes. For example, a transparent left and right border with a solid bottom border produces an upward-pointing triangle.
What is the border hack for CSS triangles?
The border hack sets the element dimensions to 0 and applies borders selectively. Solid borders form the visible sides and transparent borders form the invisible sides. The size of each border controls the width and height of the resulting triangle. This is a pure-CSS technique with no images or SVG required.
What do width and height control for each direction?
For top and bottom triangles, width sets the full horizontal span and height sets how tall the triangle is. For left and right triangles, width sets how wide the triangle extends and height sets the full vertical span. For corner triangles (e.g. top-left), both width and height control the size of the corner square from which the triangle is cut.
Should I use CSS triangles or SVG triangles?
CSS triangles are self-contained and require no external assets, making them ideal for small decorative shapes like tooltips, badges, pointers, and dividers. SVG triangles are better when you need arbitrary rotation, gradients, or the shape to scale at any size without adjusting code. For simple directional indicators, the CSS border hack is the simplest and lightest option.
Can I use CSS triangles in dark mode?
Yes. Because the triangle is formed by borders, you can override the border color with a CSS custom property or a dark-mode media query. For example, use a CSS variable as the color value so it automatically flips between light and dark themes.