SiteTidy
Home /Tools /CSS Triangle

CSS Triangle Generator

Generate simple geometric triangles using only CSS borders.

CSS Triangle

Generate perfect triangles with borders.

Direction

Equilateral Mode
Live Preview 
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-left-width: 60px;
  border-right-width: 60px;
  border-bottom-width: 120px;
  border-bottom-color: #4f46e5;
}

How Do CSS Triangles Work?

CSS triangles are created using a quirky behavior of CSS borders. When an element has zero width and zero height, its borders meet at an angle rather than a straight line.

The Technique

By making one border colored and the adjacent borders transparent, the colored border forms a perfect triangle pointing in the opposite direction.

  • A bottom border creates an upward-pointing triangle.
  • A left border creates a rightward-pointing triangle.

Common Use Cases

While SVGs are often better for complex graphics, CSS triangles remain a lightweight, dependency-free solution for:

  • Tooltip arrows and pointers
  • Dropdown menu indicators (like carets)
  • Speech bubble tails
  • Ribbon folds in decorative layouts

Related Guides

Deepen your understanding with our expert articles.

The Ultimate Guide to Meta Tags for SEORead guide →