Для создания треугольников средствами 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;
}
arrows

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

.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; 
}

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

small-arrows
.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; 
}

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

big-arrows

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

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

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

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