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

block

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

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

small-arrows

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

big-arrows

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

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован