CSS triangle generator

How to use the CSS triangle generator

  1. Pick a direction — up, down, left, right, or corner-oriented (top-left, top-right, etc.).
  2. Adjust width and height — the triangle scales accordingly.
  3. Choose color.
  4. Optionally use clip-path mode for more complex shapes (diamond, parallelogram, custom polygon).
  5. Copy the CSS — output works as a pseudo-element (::before, ::after) or standalone element.

When to use it

CSS triangles (using the border hack) are zero-byte and inherit text color via currentColor. Use them for tooltip arrows, dropdown carets, and small decorative accents where you want the shape to match surrounding text styling. Use SVG for complex shapes, crisp scaling at all sizes, or anything more complex than a triangle. Modern recommendation: clip-path: polygon(...) is more flexible than border-triangles and outputs the same byte count. Alternative: css-tricks.com's triangle tutorial covers the theory; this tool outputs the code.

Example

/* Tooltip arrow using the classic border hack */
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #1f2937;  /* arrow color */
}

/* Modern clip-path equivalent */
.arrow-modern {
  width: 16px;
  height: 16px;
  background: #1f2937;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

Frequently asked questions

Why does the border trick work?
When a box has zero width and height but non-zero borders, each border is rendered as a triangle meeting at the center. Setting three borders to transparent leaves only the fourth visible as a triangle.
Clip-path vs border hack — which should I use?
Clip-path is more flexible (any polygon shape) and easier to read. Border hack is marginally better for older browsers and when you want currentColor to apply. Use clip-path by default; fall back to border hack only if you're supporting IE11.
Can I add a border to a CSS triangle?
Not with the border hack — the whole shape is made of borders. Use clip-path with two stacked elements (one slightly smaller, both clipped) or use SVG with a stroke.
How do I make a rounded triangle?
Clip-path doesn't support rounded polygon corners natively. Use SVG <path> with stroke-linejoin="round" or a filter: url(#goo) technique.
Does this work in CSS Grid/Flex layouts?
Yes — triangles are just normal block elements with funny borders. Flex and grid lay them out identically to any other box.

Related generators

Last updated: 2026-04-23