[css] 왼쪽, 오른쪽 화살표 만들기

css로 왼쪽, 오른쪽 화살표 만들기

html

<div class="card-tab-menu">
	<button class="slick-prev slick-arrow">Previous</button>
	<button class="slick-next slick-arrow">Next</button>
</div>

 

css

.card-tab-menu .slick-arrow {
	width: 60px;
	height: 68px;
	background-color: #fff;
	border: 1px solid #eee;
    font-size: 0px;
}

.card-tab-menu .slick-arrow::after {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	border: 1px solid #b8b8b8;
	border-width: 0 2px 2px 0;
	margin-left: -2px;
	padding: 10px;
}

.card-tab-menu .slick-prev::after {
	left: 60%;
	-webkit-transform: translate(-50%, -50%) rotate(135deg);
	transform: translate(-50%, -50%) rotate(135deg);
}

.card-tab-menu .slick-next::after {
	-webkit-transform: translate(-50%, -50%) rotate(-45deg);
	transform: translate(-50%, -50%) rotate(-45deg);
}