Speech arrow mixin

speech-arrow-mixin.scss

@mixin with-speech-arrow (
  $align: left,
  $size: 20px,
  $border-color: #eee
) {
  &:before,
  &:after {
    content: '';
    position: absolute;
    border-color: transparent;
    border-style: solid;
    border-top: 0;
  }
  // speech arrow border (actually the bottom of two fill-shapes)
  &:before {
    top: -$size;
    #{$align}: $size;
    border-width: $size;
    border-bottom-color: $border-color;
  }
  // speech arrow fill (rendered on top of the ‘border’ fill-shape)
  &:after {
    top: -$size + 1px;
    #{$align}: $size + 1px;
    border-width: $size - 1px;
    border-bottom-color: $white; // should clip main shape’s border with that shape’s background colour… 
  }
}