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

$sqrt_2: 1.41421356237;

// bullet icon SCSS mixin
@mixin iconBullet($direction: 'up', $width: 50px, $height: 25px, $thick: 2px, $color: #222, $display: inline-block, $position: relative){
  position: $position;
  display: $display;
  width: $width;
  height: $height;
  overflow: hidden;

  @if ($direction == 'up' or $direction == 'down') {
    $size: floor($width/$sqrt_2 - 2*$thick);
    $rate: 2*$height/$width;
    $margin-top : round($rate*$size/(2*$sqrt_2));

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: $size;
      height: $size;
      @if ($rate == 1) {
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
        transform: translate(-50%, -50%) rotate(45deg);
      } @else {
        -webkit-transform: translate(-50%, -50%) scale(1, $rate) rotate(45deg);
        transform: translate(-50%, -50%) scale(1, $rate) rotate(45deg);
      }

      @if ($direction == 'up') {
        margin-top: $margin-top;
        border-top: $thick solid $color;
        border-left: $thick solid $color;
      } @else if ($direction == 'down') {
        margin-top: - $margin-top;
        border-right: $thick solid $color;
        border-bottom: $thick solid $color;
      }
    }
  }  @else if ($direction == 'left' or $direction == 'right') {
    $size: floor($height/$sqrt_2 - 2*$thick);
    $rate: 2*$width/$height;
    $margin-left : round($rate*$size/(2*$sqrt_2));

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: $size;
      height: $size;

      @if ($rate == 1) {
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
        transform: translate(-50%, -50%) rotate(45deg);
      } @else {
        -webkit-transform: translate(-50%, -50%) scale($rate, 1) rotate(45deg);
        transform: translate(-50%, -50%) scale($rate, 1) rotate(45deg);
      }

      @if ($direction == 'left') {
        margin-left: $margin-left;
        border-left: $thick solid $color;
        border-bottom: $thick solid $color;
      }  @else if ($direction == 'right') {
        margin-left: - $margin-left;
        border-top: $thick solid $color;
        border-right: $thick solid $color;
      }
    }
  }
}

.has_bg {
  background-color: pink;
}

// 기본형
.icon_bullet { 
  @include iconBullet(); 
}

// 예시
.icon_bullet_ex1 { 
  @include iconBullet($direction: 'left', $width: 30px, $height: 60px, $thick: 3px, $color: #666, $display: inline-block, $position: relative); 
}

.icon_bullet_ex2 { 
  @include iconBullet($direction: 'down', $width: 40px, $height: 40px, $thick: 5px, $color: #222, $display: inline-block, $position: relative); 
}

.icon_bullet_ex3 { 
  @include iconBullet($direction: 'right', $width: 40px, $height: 80px, $thick: 8px, $color: #222, $display: inline-block, $position: relative); 
  &:before {
    box-shadow: 0 1px 4px 0 rgba(#000, 0.8);
  }
  
  background-color: transparent;
}