Triangle Generator
Generate CSS triangles
Parameters
Preview
CSS Code
About This Tool
The CSS Triangle Generator creates triangles using pure CSS border tricks. No images or SVGs needed - just CSS that works in all browsers.
Customize the direction, size, and color of your triangle, then copy the generated CSS code. Perfect for tooltips, dropdown arrows, decorative elements, and UI indicators.
How It Works
How to Use This Generator
Creating CSS triangles is simple:
- Choose direction - Select which way the triangle points (up, down, left, right, or diagonal).
- Set size - Adjust width and height independently for different triangle shapes.
- Pick color - Choose the triangle fill color.
- Copy CSS - Get the generated code ready to use.
Formula
CSS Triangle Technique
Triangles are created using transparent borders:
Triangle pointing up: width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #3498db;
Triangle pointing right: width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid #3498db;
Examples
Examples
Example 1: Tooltip Arrow (Down)
- Direction: Down
- Size: 10px x 10px
- Color: #333
- Use: Tooltip pointer
Example 2: Dropdown Indicator
- Direction: Down
- Size: 6px x 4px
- Color: #666
- Use: Select/dropdown arrow
Example 3: Navigation Arrow
- Direction: Right
- Size: 8px x 12px
- Color: #007bff
- Use: "Next" button indicator
Frequently Asked Questions
How do I create a CSS triangle?
Use a zero-sized element with colored borders. For an upward triangle: width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #333. The generator handles all orientations.
What triangle directions are supported?
The generator creates triangles pointing up, down, left, right, and all four diagonal directions. Each is achieved by making three borders transparent and one colored. You can also create equilateral, isosceles, and right triangles.
Can I use clip-path instead of borders for triangles?
Yes. clip-path: polygon(50% 0%, 0% 100%, 100% 100%) creates a triangle that can have backgrounds, gradients, and images. Clip-path triangles are more flexible than border triangles. The generator offers both methods.
How do I create a triangle with a border/outline?
Layer two triangles: a larger one for the border color and a smaller one on top for the fill. Position the smaller triangle with absolute positioning. The generator calculates the exact sizes and offsets needed.
Where are CSS triangles commonly used?
Tooltip arrows, dropdown indicators, breadcrumb separators, accordion expand/collapse icons, speech bubble pointers, and decorative elements. CSS triangles avoid image requests and scale perfectly at any size.
Disclaimer
Disclaimer: The generated CSS code is provided as-is for use in your projects. Browser rendering may vary slightly. Always test the output across target browsers and devices. This tool is for informational and development purposes only.
💡 Tips
Tips
- Use equal border widths for equilateral triangles
- Adjust border widths independently for different shapes
- Position with ::before or ::after pseudo-elements
- Combine with other elements for complex shapes
- Consider using clip-path for more complex triangles