CSS Triangle Generator
Create CSS triangles with the border trick.
Ad
Ad
Frequently Asked Questions
How does the CSS border triangle trick work? +
When an element has zero width and height, its borders meet at diagonal edges. By making three borders transparent and one colored, only one triangular section of the border is visible. The direction of the triangle is opposite to the colored border side.
Can I make a right-angle or equilateral triangle with CSS? +
Yes. For an equilateral triangle, set the side borders to about 57.7% of the base border width (the ratio is 1/sqrt(3)). For a right-angle triangle, set one side border to 0 width while keeping the other at full width. Adjust the border widths independently for any triangle shape.
How do I add a border or outline to a CSS triangle? +
Since the triangle itself is made of borders, you can't directly add a border to it. The common workaround is to stack two triangles: a slightly larger one behind for the outline color and the smaller one on top for the fill. Use a parent element with position relative and the two triangles positioned absolutely.
Are CSS triangles accessible and responsive? +
CSS triangles are purely decorative, so they don't affect accessibility. For responsive sizing, you can use viewport units (vw, vh) or em units instead of px for the border widths. Alternatively, consider using clip-path for more flexible responsive shapes.
Ad