<h1>Bullet (화살표) 아이콘</h1>

<h2>:: 기본형</h2>
<i class="icon_bullet" role="img" aria-label="위로"></i>

<h2>:: 예시</h2>
<i class="icon_bullet_ex1 has_bg" role="img" aria-label="이전으로"></i>
<i class="icon_bullet_ex2 has_bg" role="img" aria-label="다음으로"></i>
<i class="icon_bullet_ex3 has_bg" role="img" aria-label="다음으로"></i>
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;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.