CSS Triangle Generator
Generate CSS-only triangles and arrows using the border trick.
Preview
CSS Code
How CSS triangles work
Elements with zero width and height render only their borders. Borders meet at angles at the corners. Making 3 borders transparent and 1 colored creates a triangle. The colored border determines the direction the triangle points.
Frequently Asked Questions
Why use CSS triangles instead of SVG?▼
CSS triangles work everywhere, add no HTTP requests, and are pure CSS — great for small decorative arrows in tooltips, dropdown indicators, and callout pointers. For complex or larger shapes, SVG is better. CSS triangles have a slight disadvantage: they don't scale perfectly with rem/em and can look pixelated at unusual sizes.
How do I position a tooltip arrow?▼
Position the triangle with ::before or ::after pseudo-elements: .tooltip::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-bottom-color: #333; } This creates an upward-pointing arrow centered below the tooltip.
Can CSS triangles be responsive?▼
CSS triangles using the border trick use fixed pixel values, so they don't inherently scale. For responsive arrows, use CSS clip-path: polygon() — it creates triangles that scale with the element. Example: clip-path: polygon(50% 0%, 0% 100%, 100% 100%) creates an upward triangle.
What is clip-path vs border triangles?▼
Both create triangles but work differently. Border trick: uses a zero-size element with colored borders — supported everywhere, no clipping, doesn't work on elements with content. clip-path polygon: crops a rectangular element into a triangle shape — works on elements with content, scalable, but clips children.