<div class="arrowtastic top">
  Top Arrow
</div>

<div class="arrowtastic left">
  Left Arrow
</div>

<div class="arrowtastic right">
  Right Arrow
</div>

<div class="arrowtastic bottom">
  Bottom Arrow
</div>


<small>Based on the work of <a href="http://cssarrowplease.com/">Simon Højberg</a></small>

@import "compass/css3";

@mixin css-arrow($position: 'top', $size:30, $borderWidth:4, $color:darkgrey, $borderColor:#fff) {

	$iPosition : opposite-position($position);
  $hasBorder : true;
  $pseudoSelector : '&:after';
  $sizeOffset : $size + round($borderWidth * 1.41421356);
  @if $borderWidth < 1 {
    $hasBorder : false;
  }
  @if $hasBorder {
    $pseudoSelector : $pseudoSelector + ', &:before';
  }

  background:$color;
  @if $hasBorder {
    border:#{$borderWidth + 'px solid ' + $borderColor};
  }
  position:relative;
  
  #{$pseudoSelector} {
    border:solid transparent;
    content:' ';
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
    #{$iPosition} : 100%;
    @if $position == 'top' or $position == 'bottom' {
      left:50%; 
    } @else {
      top:50%;
    }
  }
  
  &:after {
    border-color:rgba($borderColor, 0);
    border-#{$iPosition}-color:$color;
    border-width:#{$size + 'px'};
    @if $position == 'top' or $position == 'bottom' {
      margin-left:#{0-$size + 'px'}; 
    } @else {
      margin-top:#{0-$size + 'px'};
    }
  }
  
  @if $hasBorder {
  &:before {
    border-color:rgba($color, 0);
    border-#{$iPosition}-color:$borderColor;
    border-width:#{$sizeOffset + 'px'};
    @if $position == 'top' or $position == 'bottom' {
      margin-left:#{0-$sizeOffset + 'px'}; 
    } @else {
      margin-top:#{0-$sizeOffset + 'px'};
    }
  }
  } 
}

body {
  @include background(radial-gradient(50% 100%, #fff 10px, #efefef 50%));
}

.arrowtastic {
  @include box-shadow(0 1px 2px rgba(0,0,0,0.2));
  color:#fff;
  font:bold 16px sans-serif;
  margin:40px auto;
  padding:40px;
  text-align:center;
  width:200px;
}

.top {
  @include css-arrow();
}
.left {
  @include css-arrow('left');
}
.right {
  @include css-arrow('right');
}
.bottom {
  @include css-arrow('bottom');
}


.nested {
  background:transparent;
  box-shadow:none;
  border:0;
  
  .bottom {
    background:transparent;
    box-shadow:none;
    border:0;
  }
}

small {
  display:block;
  font-family:sans-serif;
  margin-top:40px;
  text-align:center;
}