triangle
Рисует треугольник из текущего элемента.
Параметры
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| $width * | number | — | Ширина треугольника. |
| $height * | number | — | Высота треугольника. |
| $direction * | string | — | Ключевое слово, описывающее направление треугольника. |
| $color | color | currentColor | Цвет треугольника. |
Список ключевых слов:
| Ключевое слово | Фигура |
|---|---|
top | ▲ |
bottom | ▼ |
left | ◀ |
right | ▶ |
bottom-left | ◣ |
bottom-right | ◢ |
top-left | ◤ |
top-right | ◥ |
Пример использования
@use 'more-sass' as more;
.element-one {
@include more.triangle(10px, 8px, 'top');
}
.element-two {
@include more.triangle(14px, 18px, 'bottom-left', #148cd7);
}
.element-one {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid currentColor;
}
.element-two {
border-right: 14px solid transparent;
border-bottom: 18px solid #148cd7;
}