CSS로 화살표 < > 만들기

 

슬라이더를 사용하거나 버튼에 들어갈 < > 이런 화살표가 필요한 경우, 예전에는 이미지로 많이 넣었지만 요새는 디바이스 크기가 너무나도 다양해져서 해상도에 따라서 좀 깨져보이기도 한다. 어느 상황에서도 깨져보이지 않게 css로 그려보도록 했다.

::after 요소를 사용해서 border를 넣어 각도를 조절하면 쉽게 화살표를 만들 수 있다.

 

 

비슷하게 "CSS만으로 X 버튼 만드는 두가지 방법" 은 이 글 참고

CSS만으로 X 버튼 만드는 두가지 방법

 

 

CSS 코드

.arrow {
    position: relative;
}

.arrow::after {
    position: absolute;
    left: 0; 
    top: 0; 
    content: '';
    width: 50px; /* 사이즈 */
    height: 50px; /* 사이즈 */
    border-top: 5px solid #000; /* 선 두께 */
    border-right: 5px solid #000; /* 선 두께 */
    transform: rotate(225deg); /* 각도 */
}

 

 

각도를 주지 않으면 그냥 박스 위쪽과 오른쪽에 선이 생기는 ㄱ 자 인데 transform: rotate(225deg)를 넣어 회전시켜서 화살표 모양으로 만드는 방식이다.

transform: rotate를 안넣은 경우

 

45deg 는 >

225deg 는 <
135deg 는 ∨
315deg 는 ∧

 

원하는 방향으로 각도를 바꿔주면 된다.

 

 

 

 

위의 코드를 응용해서 만들어본 화살표 버튼.

슬라이더에서 요긴하게 활용이 가능할 것 같다.