CSS Triangle Generator - Create Triangles with CSS Borders
Free online CSS triangle generator. Create triangles in any direction using the CSS border trick. Perfect for arrows, tooltips, and decorative elements.
Triangle Preview
Triangle Settings
CSS Code
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3b82f6;
}How It Works
CSS triangles use the border trick: set width and height to 0, then use colored borders on one side and transparent borders on the others to create triangle shapes.
How CSS Triangles Work
CSS triangles use the border trick: by setting an element's width and height to 0 and manipulating borders, you can create triangle shapes. One border is colored while the others are transparent, creating the triangle effect.
Common Use Cases
- Tooltip arrows and pointers
- Dropdown menu indicators
- Breadcrumb separators
- Decorative design elements
- Speech bubble tails
Triangle Directions
- Up: Use bottom border with transparent left/right
- Down: Use top border with transparent left/right
- Left: Use right border with transparent top/bottom
- Right: Use left border with transparent top/bottom
Best Practices
- Use pseudo-elements (::before, ::after) for decorative triangles
- Consider SVG for complex shapes
- Test across different browsers
- Use CSS variables for easy color changes