Создание CSS стрелок из элемента
@mixin arrow($dir: 'down', $size: 4px, $color: #000) {
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
@if ($dir == 'up' or $dir == 'down') {
border-left-width: $size;
border-right-width: $size;
}
@if ($dir == 'right' or $dir == 'left') {
border-top-width: $size;
border-bottom-width: $size;
}
@if ($dir == 'up') {
border-bottom-width: $size;
border-bottom-color: $color;
}
@if ($dir == 'down') {
border-top-width: $size;
border-top-color: $color;
}
@if ($dir == 'right') {
border-left-width: $size;
border-left-color: $color;
}
@if ($dir == 'left') {
border-right-width: $size;
border-right-color: $color;
}
}