css-arrow-please.scss

// ====== CSS ARROW PLEASE =====
// technique from http://cssarrowplease.com/
@mixin arrow-top($size, $color, $border-width, $border-color, $left: 50%) {
  & {
    background: $color;
    border: 1px solid $border-color;
  }

  &:after, &:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:after {
    border-color: rgba($color, 0);
    border-bottom-color: $color;
    border-width: $size;
    left: $left;
    margin-left: -$size;
  }
  &:before {
    border-color: rgba($border-color, 0);
    border-bottom-color: $border-color;
    border-width: $size + round(1.41421356 * $border-width);
    left: $left;
    margin-left: -($size + round(1.41421356 * $border-width));
  }
}

Currently just the top arrow as I needed that for a dropdown. Adding left, right and bottom is left as an exercise for the forker.

Nice! Just pulled into my project. Thanks