CSS만으로 화살표 만드는 방법 (border & transform 활용)

CSS만으로도 이미지 파일이나 아이콘 폰트 없이 깔끔한 화살표를 만들 수 있습니다. 핵심 원리는 border 속성으로 요소의 두 변에만 테두리를 그려 삼각형 형태를 만들고, transform의 rotate() 함수를 이용해 원하는 방향으로 회전시키는 것입니다.

동작 원리

먼저 <i> 같은 인라인 요소에 solid 스타일의 테두리를 지정하고, border-width: 0 6px 6px 0;처럼 위쪽과 왼쪽 테두리를 제거하면 꺾인 선(화살촉) 모양이 됩니다. 이후 클래스별로 회전 각도만 바꿔주면 상·하·좌·우 어느 방향의 화살표든 자유롭게 표현할 수 있습니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        padding: 20px;
    }
    i {
        border: solid rgb(62, 19, 182);
        border-width: 0 6px 6px 0;
        display: inline-block;
        padding: 3px;
    }
    p {
        font-size: 18px;
        font-weight: 500;
    }
    .rightArrow {
        transform: rotate(-45deg);
    }
    .leftArrow {
        transform: rotate(135deg);
    }
    .upArrow {
        transform: rotate(-135deg);
    }
    .downArrow {
        transform: rotate(45deg);
    }
</style>
</head>
<body>
<h2>CSS Arrows</h2>
<p>Right arrow: <i class="rightArrow"></i></p>
<p>Left arrow: <i class="leftArrow"></i></p>
<p>Up arrow: <i class="upArrow"></i></p>
<p>Down arrow: <i class="downArrow"></i></p>
</body>
</html>

회전 각도 정리

.rightArrow — rotate(-45deg): 오른쪽 방향 화살표
.leftArrow — rotate(135deg): 왼쪽 방향 화살표
.upArrow — rotate(-135deg): 위쪽 방향 화살표
.downArrow — rotate(45deg): 아래쪽 방향 화살표

실행 결과

위 코드를 실행하면 보라색 계열의 네 개 화살표가 각각 오른쪽, 왼쪽, 위쪽, 아래쪽을 가리키며 화면에 출력됩니다. 테두리 색상, 굵기(border-width), 패딩 값을 조절하면 화살표의 크기와 두께도 원하는 대로 변경할 수 있습니다.