CSS만으로 Div 하단 중앙에 삼각형 배치하는 방법

CSS의 :after 가상 요소를 활용하면 이미지 없이도 div 요소의 하단 중앙에 삼각형을 손쉽게 배치할 수 있습니다. 핵심은 테두리(border)를 조합해 삼각형 모양을 만들고, 위치 속성으로 정확한 좌표를 잡아주는 것입니다.

기본 원리

삼각형은 너비와 높이가 0인 요소에 굵은 테두리를 지정하는 CSS 기법으로 만듭니다. 위쪽 테두리에 색상을 적용하고, 왼쪽과 오른쪽 테두리는 투명(transparent)으로 처리하면 아래를 향하는 삼각형이 완성됩니다.

가로 중앙 정렬의 핵심

요소를 수평 중앙에 놓으려면 left: 50%를 지정합니다. 다만 이 값은 요소의 왼쪽 끝을 기준으로 하기 때문에, 삼각형 전체 폭(왼쪽 테두리 + 오른쪽 테두리 = 100px)의 절반인 50px만큼 왼쪽으로 당겨야 진짜 중앙 정렬이 됩니다. 이때 margin-left: -50px;를 사용합니다.

전체 코드 예시

.demo:after {
    position: absolute;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
    top: 100%;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
}

코드 설명

• position: absolute; — 부모 요소(.demo)를 기준으로 자유롭게 위치를 지정합니다. 부모에는 position: relative;가 설정되어 있어야 합니다.
• border-top: solid 50px #e15915; — 주황색 삼각형의 몸통을 만듭니다.
• border-left / border-right: transparent; — 양옆 테두리를 투명하게 해 사다리꼴이 아닌 삼각형 형태가 되도록 합니다.
• top: 100%; — 삼각형을 div의 바로 아래, 즉 하단 경계에 붙입니다.
• left: 50%; margin-left: -50px; — 수평 중앙에 정확히 배치하기 위한 조합입니다.

참고 팁

삼각형의 크기를 조절하고 싶다면 세 테두리의 픽셀 값을 동일한 비율로 늘리거나 줄이면 됩니다. 또한 최신 프로젝트에서는 clip-path나 transform을 활용한 방법도 많이 사용되지만, 테두리 방식은 구형 브라우저까지 폭넓게 지원된다는 장점이 있습니다.