A Sass mixin to create arrow boxes (similar to tooltips) borrowing from http://cssarrowplease.com, I created the following:

_arrow-box-mixin.scss

//Setting the initial border color to be red
$red: #9d261d;

//this mixin will set the box-shadow values. It will also allow for the felxibility of
//doing an inset shadow.
@mixin box-shadow ($isInset: false, $hOffset: 0, $vOffset: 0, $blur: 0, $spread: 0, $color: #ccc) {
    @if $isInset {
		-moz-box-shadow: inset $hOffset $vOffset $blur $spread $color;
		-webkit-box-shadow: inset $hOffset $vOffset $blur $spread $color;
		box-shadow: inset $hOffset $vOffset $blur $spread $color;
	} @else {
		-moz-box-shadow: $hOffset $vOffset $blur $spread $color;
		-webkit-box-shadow: $hOffset $vOffset $blur $spread $color;
		box-shadow: $hOffset $vOffset $blur $spread $color;
	}
}

//==|== CSS Arrows mixin =====================================================
// For more information on mixins go here:
// http://sass-lang.com/#mixins
// or here:
// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins
// Author: Kianosh Pourian
// TODO add the ability to change the position of the arrow from
// the middle of the box to near the bottom or top corners
//==========================================================================
 
@mixin arrow-box($arrow-box-name, 
                  $arrow-size: 5px, 
                  $bg-color: white, 
                  $border-width: 2px, 
                  $border-color: $red,
                  $arrow-box-min-width: 200px,
                  $arrow-box-min-height: 30px,
                  $arrow-box-padding: 5px,
                  $arrow-box-element-position: relative) 
{
  
    .#{$arrow-box-name} {
        position: $arrow-box-element-position;
        background: $bg-color;
        border: $border-width solid $border-color;
        min-width: $arrow-box-min-width;
        width: auto;
        min-height: $arrow-box-min-height;
        height: auto;
        padding: $arrow-box-padding;
    }

    %arrow-props {
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    //Creating a style to add the arrow in all directions
    //this will add flexibility, if the arrow direction needs to be 
    //changed.
    $directions: left right top bottom;  

    @each $direction in $directions {
        $border-position: "right";
        $margin-position: "top";

    @if $direction == "right" {
        $border-position: "left";
        $margin-position: "top";
    }
    @else if $direction == "top" {
        $border-position: "bottom";
        $margin-position: "left";
    }
    @else if $direction == "bottom" {
        $border-position: "top";
        $margin-position: "left";
    }

    .#{$arrow-box-name}-#{$direction}:after, .#{$arrow-box-name}-#{$direction}:before {
        @extend %arrow-props;
        #{$border-position}: 100%;
    }

    .#{$arrow-box-name}-#{$direction}:after {
        border-color: rgba(red($bg-color), green($bg-color), blue($bg-color), 0);
        border-#{$border-position}-color: $bg-color;
        border-width: $arrow-size;
        #{$margin-position}: 50%;
        margin-#{$margin-position}: $arrow-size * -1;
    }
  
    .#{$arrow-box-name}-#{$direction}:before {
        border-color: rgba(red($bg-color), green($bg-color), blue($bg-color), 0);
        border-#{$border-position}-color: $border-color;
        border-width: $border-width + $arrow-size + 1;
        #{$margin-position}: 50%;
        margin-#{$margin-position}: ($border-width + $arrow-size + 1) * -1;
    }
  }
    
}

@include arrow-box(demo-arrow-box);