[CSS] arrow

by heeehong

HTML

<span class="arrow-prev"></span>
<span class="arrow-next"></span>

CSS

.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); /* 각도 */
}