<h1>X (취소/삭제 아이콘)</h1>

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

<h2>:: 예시</h2>
<i class="icon_cancel_ex1 has_bg" role="img" aria-label="취소"></i>
<i class="icon_cancel_ex2 has_bg" role="img" aria-label="취소"></i>
<i class="icon_cancel_ex3 has_bg" role="img" aria-label="취소"></i>
body {
  font-family: Helvetica,"Apple SD Gothic Neo",sans-serif;
}

$sqrt_2: 1.41421356237;

// X icon SCSS mixin
@mixin iconCancel($size: 21px, $thick: 2px, $color: #000, $padding: 0, $display: inline-block, $position: relative) {
	position: $position;
	display: $display;
	width: $size + $padding*2;
	height: $size + $padding*2;

	&:before, &:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: round($size*$sqrt_2 - $thick);
		height: $thick;
		background-color: $color;
	}

	&:before {
		-webkit-transform: translate(-50%, -50%) rotate(45deg);
		transform: translate(-50%, -50%) rotate(45deg);
	}

	&:after {
		-webkit-transform: translate(-50%, -50%) rotate(135deg);
		transform: translate(-50%, -50%) rotate(135deg);
	}
}

.has_bg {
  background-color: pink;
}

// 기본형
.icon_cancel { 
  @include iconCancel(); 
}

// 예시
.icon_cancel_ex1 { 
  @include iconCancel($size: 50px, $thick: 10px, $color: #666, $padding: 0, $display: inline-block, $position: relative); 
}

.icon_cancel_ex2 { 
  @include iconCancel($size: 30px, $thick: 5px, $color: #000, $padding: 10px, $display: inline-block, $position: relative); 
}

.icon_cancel_ex3 { 
  @include iconCancel($size: 20px, $thick: 2px, $color: #444, $padding: 15px, $display: inline-block, $position: relative); 
  
  background-color: #ddd;
  border-radius: 50%;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.