Design
CSS Triangle Generator
Input
Pick direction, base width, height, and color.
Direction
Base Width60px
Height80px
Copy generated CSS and apply to an empty element.
Output
.triangle {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 80px solid #6366f1;
}Frequently Asked Questions
How do CSS triangles work?
CSS triangles exploit how borders meet at corners when the element has zero width and height. When three borders are transparent and one is colored, the colored border forms a triangle. The direction of the triangle depends on which border is colored. This is a pure CSS technique requiring no images.
When should I use CSS triangles vs SVG?
CSS triangles: simple tooltips, dropdown carets, directional indicators — quick, no extra files. SVG: complex shapes, scalable icons, animations, or triangles that need to be styled dynamically. CSS triangles are harder to maintain for non-right-angle shapes; SVG is more flexible.
How do I center a CSS triangle?
Use position: absolute on the triangle and position: relative on the parent. Center with left: 50%; transform: translateX(-50%); for horizontal centering, or top/bottom with similar transforms for vertical. CSS triangles do not respond to text-align: center.