CSS Triangle Mixin онлайн урок.


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

Если, как и я, вы никогда не помните, как это работает, убедитесь, что мы можем использовать Сасса, чтобы помочь нам.

/// Triangle helper mixin
/// @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
/// @param {Color} $color [currentcolor] - Triangle color
/// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
@if not index(top right bottom left, $direction) {
@error "Direction must be either `top`, `right`, `bottom` or `left`.";
}

width: 0;
height: 0;
content: '';
z-index: 2;
border-#{opposite-position($direction)}: ($size * 1.5) solid $color;

$perpendicular-borders: $size solid transparent;

@if $direction == top or $direction == bottom {
border-left: $perpendicular-borders;
border-right: $perpendicular-borders;
} @else if $direction == right or $direction == left {
border-bottom: $perpendicular-borders;
border-top: $perpendicular-borders;
}
}

Дополнительные примечания:

* Функцияпротивоположной позиции происходит от Compass ; если вы не используете Compass, вам может понадобиться иметь свой собственный ;
* Миксин не занимается позиционированием треугольника; прекрасно сочетать его с позиционирующим миксером ;
* Директиваcontentпредназначена для того, чтобы разрешить ее использовать в псевдоэлементах, что на самом деле заканчивается в большинстве случаев.

# Применение

.foo::before {
@include triangle(bottom);
position: absolute;
left: 50%;
bottom: 100%;
}

.foo::before {
width: 0;
height: 0;
content: '';
z-index: 2;
border-top: 1.5em solid currentColor;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
position: absolute;
left: 50%;
bottom: 100%;
}