На сайте: 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.