<span class="arrow-prev"></span> <span class="arrow-next"></span>
.arrow-prev, .arrow-next { position: relative; float:left; border:1px solid #000; width:100px; height:100px; margin-right:5px; } .arrow-prev::after { position: absolute; left: 35px; top: 20px; content: ''; width: 50px; /* 사이즈 */ height: 50px; /* 사이즈 */ border-top: 5px solid #000; /* 선 두께 */ border-right: 5px solid #000; /* 선 두께 */ transform: rotate(225deg); /* 각도 */ } .arrow-next::after { position: absolute; left: 10px; top: 20px; content: ''; width: 50px; /* 사이즈 */ height: 50px; /* 사이즈 */ border-top: 5px solid #000; /* 선 두께 */ border-right: 5px solid #000; /* 선 두께 */ transform: rotate(45deg); /* 각도 */ }