CSS 삼각형 생성기

CSS 삼각형은 툴팁 화살표, 드롭다운 캐럿, 리본, 장식용 모서리에 쓰입니다. 고전적인 방법은 너비와 높이가 0인 상자의 테두리 하나에 색을 입히는 것으로, 테두리끼리 만나는 곳이 대각선으로 잘리기 때문에 색칠한 테두리 하나가 삼각형이 됩니다. 현대적인 방법은 일반 상자를 잘라 내는 clip-path: polygon()입니다. 이 생성기는 여덟 방향 모두에 대해 두 가지를 만들어, 브라우저에서 나란히 미리 보여 줍니다.

사용 방법

1. 삼각형이 향하는 방향을 고릅니다.
2. 너비와 높이를 정하거나, 정삼각형을 체크해 세 변의 길이를 같게 합니다.
3. 색을 고르고, 필요하면 클래스 이름을 정합니다.
4. border 방식 CSS 또는 clip-path CSS와 HTML 요소를 복사합니다.

계산식

up: border-left = border-right = width ÷ 2 (transparent), border-bottom = height (color) · corner: one colored border = height, one transparent border = width · equilateral: height = width × √3 ÷ 2

왼쪽과 오른쪽 삼각형에서는 역할이 바뀌어, 위·아래 테두리가 높이의 절반이 되고 색칠한 옆 테두리가 너비가 됩니다. clip-path는 상자에 대한 백분율로 꼭짓점을 나열합니다.

예시

기본값인 위쪽 삼각형(100 × 80 px, #2563eb)은 0 × 0 상자에 border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid #2563eb;를 쓰거나, 100 × 80 상자에 clip-path: polygon(50% 0, 100% 100%, 0 100%)를 씁니다. 정삼각형을 체크하면 높이가 100 × √3 ÷ 2 = 86.6 px로 바뀝니다.