Last Updated: February 25, 2016
·
1.334K
· dnax

Compass mixin to make a triangle indicator

@mixin top-indicator($color, $size: 10px) {
  border-bottom: $size solid $color;
  border-left: $size solid transparent;
  border-right: $size solid transparent;
  height: 0;
  position: absolute;
  top: -$size;
  width: 0;
}

This mixin must be applyed to an element into a container with position:relative.

For example:

<div class="container">
    <span class="indicator"></div>
</div>