Стрелки с помощью свойства border
С помощью border можно легко делать стрелочки разного размера и в разных направлениях.
Чтобы понять общий принцип, возьмем див нулевого размера, сделаем ему толстую рамку и раскрасим её в разные цвета:
Теперь достаточно задать transparent вместо цветов, которые не нужны, и обнулить border напротив нужного уголка, чтобы он не влиял на ширину фигуры:
Обнулив border не с одной стороны, а с двух, можно получить вот такие уголки:
Аналогичный эффект можно получить, задав цвет двум сторонам, находящимся рядом:
При этом в середине длинной стороны может быть небольшая неровность, в отличие от первого способа.
А если задать цвет с трёх сторон, получатся флажки : )
Но вернемся к стрелкам. Сочетая border и псевдоэлементы можно получить вот такие варианты:
Большим преимуществом способа является отсутствие изображений, что позволяет в любой момент изменить цвет и размер стрелки.
А ещё таким способом легко делать ленточки:
