디자인/html·css

CSS로 화살표 < > 만들기

반응형

 

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

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

 

 

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

 

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

닫기 버튼 만드는 경우 그냥 X 쓰기에는 세로로 긴 알파벳 모양이라 디자인적으로 좀 그렇고, 이미지로 사용하기에는 살짝 귀찮고했는데, CSS 만으로 X 버튼 만들기가 가능하다는 사실!! 첫번째

hongpage.kr

 

 

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  

 

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

 

 

 

 

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

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

 

반응형