How do I draw a triangle in pure CSS without SVG?
The classic CSS trick used since ~2008: a `<div>` with zero dimensions (width: 0, height: 0) and only one colored border, the rest transparent, looks like a triangle. The browser cuts borders on the diagonal where they meet, so a single colored border on a sized-zero element forms a triangle.
This is 0 KB, zero dependencies, full GPU support, perfect for: arrows in dropdowns, tails on tooltips, breadcrumb separators. No SVG, no PNG, no icon font needed.
Here you pick a direction (8 variants: 4 arrows + 4 diagonals), a size and a color. The CSS is ready to copy.
How to use
- Pick a direction by clicking one of the 8 icons (up/down/left/right + 4 corners).
- The size slider (4-200px) controls the triangle. The triangle is twice as wide as tall for the 4-cardinal directions.
- Color with the picker or type a hex. Any CSS color works (#hex, rgb, oklch, named colors).
- Copy the CSS and paste it into your stylesheet. Apply the `.triangle` class to an empty `<div>` or `<span>`.
- Trick: for non-equilateral triangles change width/height to different values (e.g. bigger bottom border = taller triangle).
When this helps
A CSS triangle is a ubiquitous UI primitive. The three most common uses:
- Dropdown arrow (the small chevron next to a select). Shows the list can be opened. Very light, GPU-fast, works anywhere.
- Tooltip / message bubble tail. Tooltip appears above an element, a small triangle says "we are pointing at this element". Classic.
- Breadcrumb separator (Home > Products > Category). Instead of ">" or "/", a CSS triangle gives subtle elegant separation.
- Carousel next/prev arrows. A triangle instead of an SVG icon = lighter, GPU-fast.
- Modal or popover indicator. The triangle on the modal edge says "this points at element X".
- Corner ribbon decoration (4 diagonal variants). A triangle in a card corner = retro-tech vibe or a "NEW!" ribbon badge.
To add a shadow under a triangle (it works!), use `filter: drop-shadow()` (`box-shadow` does not work, there is no actual box). For animation the triangle transforms like any element. For more complex shapes see the clip-path generator.