Q:

Как создать треугольники CSS?

На сайте: CSS Tricks - Shapes of CSS есть множество различных форм CSS, и я особенно озадачен треугольником.

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div id="triangle-up"></div>

Как и почему это работает?
Прим. переводчика
Я выбрал этот относительно простой вопрос для перевода, так как меня заинтересовали ответы, которые очень наглядно, подробно и доходчиво объясняют технику реализации фигур CSS. Ответов много, планирую в дальнейшем добавить переводы других  интересныx ответов из этого топика Enso.
Свободный перевод вопроса How do CSS triangles work? от участника  @Stanislav Shabalin.

A:

CSS Треугольники: трагедия в пяти действиях
Как сказал alex, границы одинаковой ширины расположены друг против друга под углом 45 градусов:    
 
Когда у вас нет верхней границы, это выглядит так: 
 
Затем вы устанавливаете фигуре ширину 0 ...   
 
... и высоту 0 ...   
 
Результатом будет треугольник:   

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div id="triangle-up"></div>

Свободный перевод ответа How do CSS triangles work? от участника  @sdleihssirhc.

A:

Посмотрел тот топик, такого варианта там нет:

div {
  width: 50px;
  height: 50px;
  background: linear-gradient(45deg, transparent 50%, red 51%);
  transform: skew(-25.5deg);
}
<div></div>

