Pure CSS Triangle Generator & Code Builder
Generate lightweight CSS border triangles pointing top, bottom, left, right, or diagonally with custom colors.
About This Tool
CSS Triangle Generator uses the classic CSS border geometry technique to create pure vector triangles without images or SVGs, perfect for tooltips, popover arrows, and dropdown indicators.
Key Features
8 triangle directions (cardinal and diagonal)
Custom width and height sliders
Hex and RGB color picker
Clean CSS code generator
How to Use This Tool
- Select your triangle direction (Top, Bottom, Left, Right, or Diagonals).
- Adjust width and height sliders.
- Pick your triangle color.
- Copy the pure CSS code.
Why Use This Tool
- Zero HTTP requests or extra asset dependencies.
- Works in all browsers back to IE6.
- Ideal for tooltip pointers, breadcrumbs, and accordion arrows.
Pro Tips
- Attach your triangle to a tooltip box using 'position: absolute' on the ::after pseudo-element
- For diagonal triangles, set the adjacent borders to transparent
Frequently Asked Questions
How do CSS border triangles work?
By setting width and height to 0 and applying colored borders opposite to transparent borders, the browser renders triangular border miters.
Can I use CSS triangles in pseudo-elements?
Yes, CSS triangles are commonly placed inside ::before and ::after pseudo-elements with 'content: ""'.