css로 화살표 모양 만들기 >

 

 

이런 ">" 모양의 화살표는 자주 사용 되는데 간단하게 css로 만들 수 있습니다.

 

.arrow:after {
    content: '';
    display:inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: 0.5rem;
    border-top: 0.1rem solid #333;
    border-right: 0.1rem solid #333;
    transform: rotate(45deg);
}

 

먼저 boarder만 있는 네모를 만든다고 생각하고 border 값을 top과 right만 준 상태에서

transform:rotate(45deg);를 이용해서 45도 회전 시켜주면 아래와 같은 모양을 만들 수 있습니다.

 

 

 

transform css Browser Support