Last Updated: February 25, 2016
·
1.466K
· 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>