Generated CSS
CSS triangles are created using the border trick — a zero-width, zero-height element with thick borders. When three sides are transparent and one is colored, the visible border forms a triangle. This is pure CSS with no images, no SVG, and no extra HTML elements.
/* Triangle pointing right */
.triangle {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 60px solid #7c6fff;
}
| Shape | Use case |
|---|---|
| Up / Down triangle | Sort indicators, accordion arrows, dropdown icons |
| Left / Right triangle | Carousel arrows, next/prev buttons, breadcrumbs |
| Corner triangle | Ribbon badges, "NEW" banners, notification corners |
| Speech bubble tail | Tooltips, chat bubbles, popover arrows |
Not directly — borders on borders don't work. The solution is to layer two triangles: a slightly larger one in the border color underneath the main triangle. Use ::before and ::after pseudo-elements for a single-element implementation.
For simple directional arrows in UI, CSS triangles are fine and have zero network cost. For complex shapes, icons, or anything that needs to scale cleanly at unusual sizes, SVG is better. The CSS border trick is a widely supported, zero-dependency solution.
CSS triangles have no natural center since their visual size differs from their width/height (which are both 0). Use a wrapper element with display: flex; align-items: center; justify-content: center; to center the triangle visually.
Related tools: CSS Clip Path Generator · Border Radius Generator