How do CSS triangles work?

CSS “triangles” are typically made by creating an element with 0 width and 0 height and applying borders on each side. By making three of those borders transparent and one a solid color, you get a triangle.

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red; 
}

This shapes an upward-pointing triangle. Adjusting which sides are transparent vs. colored changes the direction and shape.

1. How It Works

1. Zero Dimensions
   By setting width: 0; and height: 0;, the element itself has no “box” area.

2. Border Trick
   Each side of the box has a border:

   • border-left: 50px solid transparent;
   • border-right: 50px solid transparent;
   • border-bottom: 50px solid red;
   • (and possibly border-top: ...; depending on the orientation)

3. Triangular Shape
   Since the box is 0x0, you only see the “borders” meeting at a point, forming a triangle. The solid side is the visible color; transparent sides are invisible, shaping the triangle’s edges.

2. Basic Directions

• Upward Triangle

  .triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
  }

• Downward Triangle

  .triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid blue;
  }

• Left-Facing Triangle

  .triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 50px solid green;
  }

• Right-Facing Triangle

  .triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid purple;
  }

3. Adjusting Size and Angles

1. Border-Width
   Changing the 50px values changes the size (or angles) of the triangle. For instance, if you want a flatter triangle, make one side narrower.

2. Combining Borders
   You can create more complex shapes by mixing multiple non-transparent borders. But typically for a pure triangle, only one side is colored; the other sides remain transparent.

3. Responsive Triangles
   You could use relative units (e.g., em, rem, vw, etc.) to make a triangle that scales with the viewport or text size.

4. Uses in Real Layouts

• Tooltip Arrows
  Commonly used to create the little arrow pointing from a tooltip or speech bubble.
• Dropdown Indicators
  A downward triangle can indicate a dropdown button or menu.
• Decorative Shapes
  Triangles can be used in backgrounds, headers, or custom shapes without needing an image.

5. Why This Works

Browsers draw borders around the four edges of a box. If the box is 0 x 0, the borders converge at a single point. The one colored edge reveals a triangular shape, while the three transparent edges form invisible sides.

Key Takeaway
By cleverly leveraging the border properties on a zero-sized box, you can form triangles (and related shapes) with pure CSS—handy for tooltips, arrows, and decorative design without any external images.