A Pen by Evan Lovely.

CSS-Arrows-from-Borders.markdown

CSS Arrows from Borders

A Pen by Evan Lovely on CodePen.

License.

index.html

<h2>Arrow</h2>
<span class="arrow"></span>

<hr />

<h2>Special Arrow</h2>
<span class="special-arrow"></span>

style.scss

@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);
}