<html class="no-js" lang="">
  <head>
    <title>Example</title>
  </head>
  <body>
    <span class="arrow arrow-bar is-top"></span>
    <span class="arrow arrow-bar is-right"></span>
    <span class="arrow arrow-bar is-bottom"></span>
    <span class="arrow arrow-bar is-left"></span>
    <span class="arrow is-top"></span>
    <span class="arrow is-right"></span>
    <span class="arrow is-bottom"></span>
    <span class="arrow is-left"></span>
    <span class="arrow is-triangle arrow-bar is-top"></span>
    <span class="arrow is-triangle arrow-bar is-right"></span>
    <span class="arrow is-triangle arrow-bar is-bottom"></span>
    <span class="arrow is-triangle arrow-bar is-left"></span>
    <span class="arrow is-triangle is-top"></span>
    <span class="arrow is-triangle is-right"></span>
    <span class="arrow is-triangle is-bottom"></span>
    <span class="arrow is-triangle is-left"></span>
    <span class="arrow is-check is-bottom"></span>
  </body>
</html>
@mixin rotate($angle) {
  -moz-transform: rotate($angle);
  -ms-transform: rotate($angle);
  -webkit-transform: rotate($angle);
  transform: rotate($angle);
}

@mixin arrow($arrowSize: 20px, $arrowBorderSize: 3px, $arrowBarWidth: 2px, $arrowBarHeight: 25px) {
  display: inline-block;
  height: $arrowSize;
  position: relative;
  width: $arrowSize;

  &::after {
    border-bottom-style: solid;
    border-bottom-width: $arrowBorderSize;
    border-right-style: solid;
    border-right-width: $arrowBorderSize;
    content: '';
    display: inline-block;
    height: $arrowSize;
    left: 0;
    position: absolute;
    top: 0;
    width: $arrowSize;
  }

  // Triangle shape state
  &.is-triangle::after {
    border-style: solid;
    border-width: 0 0 $arrowSize $arrowSize;
    height: 0;
    width: 0;
  }
  
  // Check shape state
  &.is-check::after {
    width: $arrowSize / 2;
  }

  // Arrow Bar
  &.arrow-bar::before {
    bottom: 1px;
    content: '';
    height: $arrowBarHeight;
    position: absolute;
    right: 0;
    transform-origin: bottom;
    width: $arrowBarWidth;
    @include rotate(-45deg);
  }

  // States
  &.is-top {
    @include rotate(225deg);
  }

  &.is-right {
    @include rotate(315deg);
  }

  &.is-bottom {
    @include rotate(45deg);
  }

  &.is-left {
    @include rotate(135deg);
  }
}

@mixin arrowColor($color) {
  &,
  .arrow {
    &::after {
      border-color: $color;
    }

    &.is-triangle::after {
      border-color: transparent;
      border-bottom-color: $color;
    }

    &::before {
      background-color: $color;
    }
  }
}

.arrow {
  margin: 25px;
  @include arrow(12px, 2px, 2px, 20px);
  @include arrowColor(red);
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.