A Pen by Evan Lovely.
@mixin arrow($color: black, $direction: down, $width: 8px, $height: 7px) {
display: inline-block;
border-style: solid;
border-color: transparent;
@if $direction == left {
border-top-width: round($height / 2);
border-bottom-width: round($height / 2);
border-left-width: 0;
border-right-width: $width;
border-right-color: $color;
}
@else if $direction == right {
border-top-width: round($height / 2);
border-bottom-width: round($height / 2);
border-right-width: 0;
border-left-width: $width;
border-left-color: $color;
}
@else if $direction == up {
border-left-width: round($width / 2);
border-right-width: round($width / 2);
border-top-width: 0;
border-bottom-width: $height;
border-bottom-color: $color;
}
@else {// $direction == down
border-left-width: round($width / 2);
border-right-width: round($width / 2);
border-top-width: $height;
border-bottom-width: 0;
border-top-color: $color;
}
}
.arrow {
@include arrow();
}
.special-arrow {
@include arrow($color: red, $direction: left, $width: 25px, $height: 18px);
}
<h2>Arrow</h2>
<span class="arrow"></span>
<hr />
<h2>Special Arrow</h2>
<span class="special-arrow"></span>