Triarrow: Triangle arrow attached to any position at the container

_triarrow.sass

%triarrow
  position: relative
  &:after  
    border: solid transparent
    content: " "
    height: 0
    width: 0
    position: absolute
    pointer-events: none
    z-index: 99
=triarrow($topbottom: 'top' ,$leftright: '50%',$size: '20px',$color: 'white')
  @extend %triarrow
  &:after
    @if $topbottom == 'top'
      bottom: 100%
      left: $leftright
      border-bottom-color: $color
    @else if $topbottom == 'bottom'
      top: 100%
      left: $leftright
      border-top-color: $color
    @else
      top: $topbottom
    @if $leftright == 'left'
      right: 100%
      border-right-color: $color
    @else if $leftright == 'right'
      left: 100%
      border-left-color: $color
    @else
      left: $leftright
    border-width: $size
    margin-top: -#{$size}
    @if $topbottom == 'bottom'
      margin-top: 0