Using pure CSS arrows is good for performance and cross-browser compatibility. Creating CSS arrows with Sass is even easy to maintain.

Markup

<p>Awesome pure CSS arrows using Sass!</p>

Sass mixin

$default-direction: right;
$default-color: #69f;
$default-size: 0.4;
@mixin css-arrow($direction: $default-direction, $color: $default-color, $size: $default-size) {
  width: 0;
  height: 0;
  border: {
    style: solid;
    width: #{$size}em;
    color: transparent;
    #{$direction}-width: 0;
  }

  @if $direction == left {
    $direction: right;
  }
  @else if $direction == right {
    $direction: left;
  }
  @else if $direction == bottom {
    $direction: top;
  }
  @else if $direction == top {
    $direction: bottom;
  }
 
  border-#{$direction}-color: $color;
}

border can also be styled the CSS way:

border-style: solid;
border-width: #{$size}em;
border-color: transparent;
border-#{$direction}-width: 0;

Usage

p {
  &:before {
    content: '';
    @include css-arrow(right);
  }
  &.active:before {
    @include css-arrow(bottom);
  }
}

You might also like:

more.. 1 2 3