Как сделать треугольник в css

Треугольник в CSS:
В файле HTML напишем следующий код:

<div id="triangle"></div>

В файле CSS напишем следующий код:

#triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue;
}

Границы одинаковой ширины прилегают друг к другу под углом 45 градусов.
Затем делаем высоту и ширину 0, прозрачные боковые границы, а за счёт пересечения границ и свойства solid в итоге получается нарисовать треугольник.
Пример в CodePen:
Треугольник в CSS