Design & Assets
CSS Triangle Generator
Generate CSS triangles for arrows, carets, tooltips, and small UI indicators.
CSS Triangle Generator
Generated triangle CSS
.triangle {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #111111;
}How CSS triangles work
A CSS triangle generator uses the border trick: a zero-sized element with transparent borders on three sides and a visible border on the fourth. This is a common pattern for tooltips, select arrows, sliders, and chat bubbles.
The main advantage is that the output stays lightweight and pure CSS. You do not need an SVG or image asset when a small arrow or caret shape is enough.
CSS triangle generator FAQ
How do you make a triangle in CSS?
Set width and height to zero, make three borders transparent, and keep one colored border visible. The visible border becomes the triangle.
What can I use a CSS triangle for?
CSS triangles are common for dropdown arrows, accordion carets, chat bubble tails, tooltip pointers, and directional UI hints.
Can I change the triangle direction?
Yes. Switching which border is colored changes the direction to up, down, left, or right.