Треугольники на CSS

Для создания треугольников средствами CSS используются блоки с нулевыми линейными размерами и широкими разноцветными границами в разных сочетаниях.

Вот он, исходный блок:

.block {
    width: 0;
    height: 0;
    border-left: 50px solid red;
    border-right: 50px solid green;
    border-top: 50px solid yellow;
    border-bottom: 50px solid violet;
}

А дальше начинаются эксперименты с шириной границ.

Например, чтобы получить треугольник-стрелочку, смотрящий вправо, обнулим правую границу, а верхнюю и нижнюю сделаем прозрачными. Аналогично получаются и следующие разнонаправленные стрелочки:

.red {
    border-left: 50px solid red;
    border-right-width: 0px;
    border-top: 50px solid transparent;
    border-bottom: 50px solid  transparent; 
}
.green {
    border-left-width: 0px;
    border-right: 50px solid green;
    border-top: 50px solid transparent;
    border-bottom: 50px solid  transparent; 
}
.yellow {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid yellow;
    border-bottom-width: 0px; 
}
.violet {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top-width: 0px;
    border-bottom: 50px solid  violet; 
}

Можно получать также маленькие стрелочки — половинки границ:

.red {
    border-left: 50px solid red;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom: 50px solid  transparent; 
}
.green {
    border-left-width: 0px;
    border-right: 50px solid green;
    border-top: 50px solid transparent;
    border-bottom-width: 0px; 
}
.yellow {
    border-left-width: 0px;
    border-right: 50px solid transparent;
    border-top: 50px solid yellow;
    border-bottom-width: 0px; 
}
.violet {
    border-left: 50px solid transparent;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom: 50px solid  violet; 
}

И большие стрелки, состоящие из двух треугольников:

Обратите внимание, что один и тот же треугольник можно получить несколькими комбинациями границ.
Вот так просто нарисовать треугольники на CSS, применение же им находится огромное: от разделителей в «хлебных крошках» до визуальных эффектов вроде загнутых уголков.