Стрелки с помощью свойства border

С помощью border можно легко делать стрелочки разного размера и в разных направлениях.

Чтобы понять общий принцип, возьмем див нулевого размера, сделаем ему толстую рамку и раскрасим её в разные цвета:

Теперь достаточно задать transparent вместо цветов, которые не нужны, и обнулить border напротив нужного уголка, чтобы он не влиял на ширину фигуры:

Обнулив border не с одной стороны, а с двух, можно получить вот такие уголки:

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

При этом в середине длинной стороны может быть небольшая неровность, в отличие от первого способа.

А если задать цвет с трёх сторон, получатся флажки : )

Но вернемся к стрелкам. Сочетая border и псевдоэлементы можно получить вот такие варианты:

Большим преимуществом способа является отсутствие изображений, что позволяет в любой момент изменить цвет и размер стрелки.

А ещё таким способом легко делать ленточки: