Как сделать треугольник с помощью свойства border-color?

Ответ на скриншоте. Для выпадающего меню или для иных целей можно не сохранять изображения маленьких треугольников разного формата, а воспользоваться свойством border-color.

border-color

Фишка в том, что стыки границ фигур, как наличники у дверей, строятся по диагонали. Будучи достаточно широкими, они сами по себе выглядят как геометрические фигуры. На примере обычный прямоугольник, его стороны раскрашены с помощью свойства border-color в разные цвета.

border-color: #bbb #ccc #eee #353535;

Чтобы отобразить на странице треугольник с основанием, например, слева, меняем значения 3 из 4 цветов сторон на transparent (прозрачный)

border-color: transparent transparent transparent #353535;

(На всякий случай: значения всегда идут в порядке верх-право-низ-лево).

С помощью псевдоэлементов (:hover, :after), можно вертеть треугольник, просто меняя порядок написания transparent в значениях элемента. Возможно, понадобится еще слегка перепозиционировать прямоугольник, если ваша стрелка достаточно большая.

Другой вариант применения, загибаем уголок виртуального стикера:

border-color top right

В углу у нас тот же самый квадратик с 4 значениями border-color, верхний и левый под цвет стикера, а правый и нижний под цвет фона. Если интересует исходник, стикер тут.

Share Button

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.