CSS Triangle Generator
Create pure CSS triangles using the border hack technique. Choose direction, size, and color with a visual preview and ready-to-copy CSS.
CSS Triangle Generator
Create pure CSS triangles using the border hack.
All processing happens locally in your browser — nothing is stored or sent to any server.
How to Use the CSS Triangle Generator
- Choose the triangle direction: top, bottom, left, or right.
- Adjust the width and height sliders to size the triangle.
- Pick a color using the color picker.
- Copy the generated CSS and paste it into your stylesheet.
About CSS Triangles
CSS triangles exploit how browsers render borders on zero-size elements. When an element has width and height of 0, each of its four borders is drawn as a triangle pointing inward. Setting three borders to transparent hides them, leaving only the fourth visible as a solid triangle shape.
The technique has been used for over a decade for tooltip arrows, dropdown caret indicators, chat bubble tails, decorative dividers, and navigation markers — all without loading a single image or SVG file. The entire shape is rendered by the browser's CSS engine, making it lightweight and infinitely scalable at any DPI.
For more complex shapes, modern CSS alternatives like clip-path: polygon() provide greater flexibility and are easier to animate. But for simple fixed-direction arrows and carets, the border technique remains the most compatible and widely-used approach. This generator outputs clean, copy-ready CSS.
Frequently Asked Questions
How does the CSS triangle trick work? ▼
Set the element's width and height to 0. The borders themselves form four triangles meeting at the center point. Setting three border colors to transparent reveals only one visible triangle in the color you choose.
Can I make a triangle with equal sides (equilateral)? ▼
The border trick creates right triangles with configurable proportions. For an upward-pointing triangle, set the left and right borders to equal values and the bottom border to your height. This produces an isoceles triangle rather than a true equilateral.
Does this work in all browsers? ▼
Yes. The CSS border triangle technique works in all browsers including IE 8+, and requires no vendor prefixes. It is one of the most widely compatible CSS tricks available.
Why use CSS triangles instead of SVG? ▼
CSS triangles require no external files, have no HTTP request overhead, and are easy to apply with dynamic colors using CSS variables. For simple decorative shapes like tooltip arrows and dropdown carets, they are faster than loading an SVG.
How do I add a CSS triangle tooltip arrow? ▼
Use a ::before or ::after pseudo-element with the border technique. Position it absolutely relative to the tooltip container using top, bottom, left, or right. Set content: "" to make the pseudo-element render. The generator shows the exact CSS needed.
Can I animate a CSS triangle? ▼
Yes, within limits. CSS transitions and animations work on border-width and border-color. You can animate size changes and color transitions. Rotating a triangle requires a wrapper element since the border technique cannot rotate cleanly on its own.
What is the clip-path alternative? ▼
clip-path: polygon(50% 0%, 0% 100%, 100% 100%) creates an upward triangle using a background color. This approach supports smooth rotation and is easier to reason about than border tricks, but requires slightly more modern browser support.