<h1>Triangle (삼각형) 아이콘</h1>

<h2>:: 기본형</h2>
<i class="icon_triangle" role="img" aria-label="취소"></i>

<h2>:: 예시</h2>
<i class="icon_triangle_ex1 has_bg" role="img" aria-label="아래로 화살표"></i>
<i class="icon_triangle_ex2 has_bg" role="img" aria-label="오른쪽 화살표"></i>
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); 
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.