body {
  font-family: Helvetica,"Apple SD Gothic Neo",sans-serif;
}

// triangle icon SCSS mixin
@mixin iconTriangle($direction: 'up', $width: 20px, $height: 10px, $color: #000, $display: inline-block){
  display: $display;
  width: $width;
  height: $height;

  &:before {
    content: '';
    display: block;

    @if ($direction == 'up'){
      border-bottom: $height solid $color;
      border-left: round($width/2) solid transparent;
      border-right: round($width/2) solid transparent;
    }
    @else if ($direction == 'down'){
      border-top: $height solid $color;
      border-left: round($width/2) solid transparent;
      border-right: round($width/2) solid transparent;
    }
    @else if ($direction == 'left'){
      border-top: round($height/2) solid transparent;
      border-bottom: round($height/2) solid transparent;
      border-right: $width solid $color;
    }
    @else if ($direction == 'right'){
      border-top: round($height/2) solid transparent;
      border-bottom: round($height/2) solid transparent;
      border-left: $width solid $color;
    }
  }
}

.has_bg {
  background-color: pink;
}

// 기본형
.icon_triangle { 
  @include iconTriangle(); 
}

// 예시
.icon_triangle_ex1 { 
  @include iconTriangle($direction: 'down', $width: 30px, $height: 15px, $color: #000, $display: inline-block); 
}

.icon_triangle_ex2 { 
  @include iconTriangle($direction: 'right', $width: 30px, $height: 50px, $color: #f00, $display: inline-block); 
}