How to make triangles with CSS borders

The trick

Give an element zero width and height, then add thick borders. Each border meets its neighbours along a diagonal. Make three sides transparent and only the fourth shows — as a triangle pointing away from the visible side.

.triangle-up {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 18px solid #c8102e; /* points up */
}

Pointing the other way

Swap which side carries the colour. A downward triangle colours the border-top; left/right triangles colour border-right / border-left.

.triangle-down { border-top: 18px solid #c8102e;  border-left:12px solid transparent; border-right:12px solid transparent; }
.triangle-left { border-right:18px solid #c8102e; border-top:12px solid transparent;  border-bottom:12px solid transparent; }

A practical use: tooltips

Position a small triangle with ::after to make a speech-bubble arrow that always matches the bubble colour.

.tooltip::after {
  content: ""; position: absolute; top: 100%; left: 20px;
  border: 8px solid transparent; border-top-color: #1c1d22;
}