CSS Triangle Generator with Borders
Generate a CSS triangle (border trick) with direction, size and color.
🔒 100% client-side — no data sent
Create a CSS triangle using the border technique and copy ready-to-paste code. Pick the direction, size and color with an instant preview. Perfect for arrows, tooltips and pointers, generated entirely in your browser.
What is it for?
- ▸ Create arrows and pointers without images
- ▸ Add a tip to a tooltip or chat bubble
- ▸ Choose the triangle direction, size and color
- ▸ Copy lightweight, widely compatible pure CSS
FAQ
How is a triangle created in CSS?
By giving an element zero width and height and coloring a single border while the others stay transparent.
Can I change the triangle direction?
Yes, simply choose which border is colored to point up, down, left or right.
Is this triangle compatible with all browsers?
Yes, the border technique is old and supported by all browsers, even legacy ones.