CSS Triangle Generator
Generate pure CSS triangles using the border trick. Pick direction, size, and color — then copy the CSS instantly.
Checkered background shows transparency
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3b82f6;
}CSS triangles use a zero-size element with large borders. Adjacent borders are set to transparent, while the
pointing border is set to the desired color. This creates the triangle shape.
About the CSS Triangle Generator
The CSS Triangle Generator creates pure CSS triangles using the classic border trick — a
technique that has been a staple of CSS development for over a decade. Instead of using
images or SVG, this approach relies entirely on CSS border properties to create geometric triangle shapes.
A CSS triangle is formed by setting an element's width and height to zero, then applying
thick borders on adjacent sides. The borders that should be invisible are set to transparent, leaving only
the border pointing in the desired direction visible.
This generator supports 8 directions: up, down, left, right, and all four diagonal corners (top-left, top-right, bottom-left, bottom-right). You can customize both the width and height independently, giving you full control over the triangle's proportions and appearance.
How to Use
- Select a direction — click one of the 8 directional buttons to choose which way the triangle points.
- Adjust the size — use the sliders or number inputs to set the width and height in pixels. For diagonal triangles, width and height control the two perpendicular legs.
- Pick a color — use the color picker, type a hex value directly, or click one of the preset swatches.
- Preview in real time — the live preview updates instantly as you change any setting. The checkered background shows that the rest of the element is fully transparent.
- Copy the CSS — click "Copy CSS" to copy the generated code to your clipboard, then paste it directly into your stylesheet.
Common Use Cases
Tooltip Arrows
Add directional arrows to tooltips and popovers — a small triangle pointing toward the trigger element creates a clear visual connection.
Dropdown Indicators
Use a downward triangle to indicate expandable menus and select elements without relying on icon fonts or images.
Decorative Dividers
Create diagonal section dividers on landing pages by using large triangles as decorative background shapes.
UI Badge Corners
Corner triangles (top-left, bottom-right) are perfect for "new", "sale", or notification badges on cards and product images.
Breadcrumb Separators
Rightward triangles work as compact and stylish separators between breadcrumb navigation items.
Progress Step Indicators
Combine triangles with step connectors in multi-step forms and wizards to visually guide users through the process.
Frequently Asked Questions
Why does the CSS use borders instead of width and height?
CSS renders borders as trapezoids that meet at the element's corners. When the element has zero width and height, adjacent transparent borders collapse, revealing the shape of a triangle from the single colored border.
Do CSS triangles work in all browsers?
Yes. The border trick is supported in every major browser including Chrome, Firefox, Safari, and Edge, as well as older browsers like IE 8+. It requires no vendor prefixes and no JavaScript.
When should I use CSS triangles instead of SVG?
CSS triangles are ideal for simple directional arrows and decorative shapes where you want zero dependencies and minimal markup. SVG is better when you need complex shapes, animations, or accessibility features like title and desc attributes.
How do I make a right triangle (not isosceles)?
Use one of the corner directions (top-left, top-right, bottom-left, bottom-right). These generate right triangles with two border properties — one colored and one transparent — forming a 90-degree corner.
Can I add a border or outline to a CSS triangle?
Not directly with the border trick, since the border properties are already used to create the shape. A common workaround is to stack two triangles — a slightly larger one behind for the "border" effect — by using pseudo-elements like ::before and ::after.
How do I center a CSS triangle?
Since the triangle's visual center differs from its box model, use flexbox on the parent: display:flex; align-items:center; justify-content:center. The triangle will appear visually centered within its container.