Как работает треугольник на CSS? В чём фокус?

Всё дело в том, что у рамки тоже есть границы, и идут они под углом. Одна рамка блока начинается там, где заканчивается другая. Создав блок с нулевой высотой и нулевой шириной, мы оставим от него только рамки.
По сути, треугольник — это дна единственная видимая рамка (нижняя), которая отсечена прозрачными левой и правой.
На схеме всё показано.