@mixin triangle($width, $color: #666, $type: 'bottom') {
  $sqrt3: 1.73;
  $triangeH: $width * $sqrt3;
  display: inline-block;
  width: 0px;
  height: 0px;
  @if($type == 'left') {
    border-top: $width solid transparent;
    border-bottom: $width solid transparent;
    border-left: $triangeH solid $color;
  } @elseif($type == 'right') {
    border-top: $width solid transparent;
    border-bottom: $width solid transparent;
    border-right: $triangeH solid $color;
  } @elseif($type == 'top') {
    border-left: $width solid transparent;
    border-right: $width solid transparent;
    border-top: $triangeH solid $color;
  } @else {
    border-left: $width solid transparent;
    border-right: $width solid transparent;
    border-bottom: $triangeH solid $color;
  }
}
.icon-triangle { 
  vertical-align: middle;
  background: rgba(red, 0.3);
  &.w50 {
    @include triangle(50px, #333)
  }
  &.w100 {
    @include triangle(100px, #ccc, 'top')
  }
   &.w70 {
    @include triangle(70px, #aaa, 'left')
  }
  &.w30 {
    @include triangle(30px, #777, 'right')
  }
}