CSS 삼각형 생성기

이 도구는 무엇인가요?

CSS에는 전용 삼각형 도형이 없어서, 잘 알려진 우회 기법으로 삼각형을 만듭니다. 너비와 높이가 0인 요소를 만들고, 한쪽 면에는 색이 있는 테두리를, 인접한 다른 두 면에는 투명한 테두리를 줍니다. 인접한 테두리끼리는 45도 각도로 만나기 때문에 투명한 테두리들이 뾰족하게 좁아지면서 색이 있는 테두리만 삼각형 모양으로 남게 됩니다.

이 도구는 그 구조를 대신 만들어줍니다. 삼각형이 가리킬 방향, 크기, 색상을 고르면 실시간 미리보기가 업데이트되고 정확한 CSS를 복사할 수 있습니다. 이는 웹 전반에서 CSS 전용 화살표, 툴팁 포인터, 드롭다운 캐럿을 만들 때 쓰이는 것과 동일한 기법입니다.

출처: CSS Backgrounds and Borders Module Level 3, W3C — 인접한 테두리 변이 각도를 이루며 만나는 방식을 정의하며, 이것이 바로 이 삼각형 기법이 의존하는 메커니즘입니다.

왜 사용해야 할까요?

• 실시간 미리보기가 실제 삼각형을 렌더링해서, 복사하기 전에 크기와 방향, 색상을 바로 확인할 수 있습니다.
• 위, 아래, 왼쪽, 오른쪽까지 네 가지 기본 방향을 컨트롤 하나로 모두 지원합니다.
• 이미지 파일이나 SVG가 필요 없습니다. 이 방식으로 만든 삼각형은 CSS 몇 줄에 불과합니다.
• 툴팁 포인터, 드롭다운/아코디언 캐럿, 커스텀 불릿 포인트, 간단한 장식용 도형에 유용합니다.
• 모든 처리가 브라우저 안에서 이루어지며, 설정한 내용이 어디로도 업로드되지 않습니다.
• 무료, 가입 불필요, 모바일에서도 사용 가능합니다.

사용 방법

1. 방향을 고르세요. 어느 쪽 면에 색이 있는 테두리를 주느냐에 따라 삼각형이 위, 아래, 왼쪽, 오른쪽 중 한 방향을 가리킵니다.
2. 크기를 설정하세요. 이 값이 세 면 모두의 border-width 값을 정하고 삼각형이 얼마나 크게 보일지를 결정합니다.
3. 보이는(색이 있는) 테두리의 색상을 고르세요. 이 색이 삼각형의 채우기 색이 됩니다.
4. 생성된 CSS를 복사해 width: 0, height: 0인 요소에 적용하세요. 빈 <div>나 ::before/::after 같은 가상 요소 모두 잘 작동합니다.

예시

입력

방향: 아래 · 크기: 60px · 색상: #ea580c

결과

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

아래를 가리키는 삼각형에서는 border-top에 색이 들어가고 왼쪽/오른쪽 테두리는 투명하게 유지됩니다. 삼각형이 가리키는 방향과는 반대쪽 면에 색을 주는 셈입니다.

너비와 높이가 0이어야 하는 이유

이 트릭은 요소가 자체 콘텐츠 박스를 갖지 않을 때만 동작합니다. width: 0, height: 0이라는 것은 보이는 모양 전체가 오직 테두리들이 중앙 한 점에서 만나면서 만들어진다는 뜻입니다. 요소에 조금이라도 너비나 높이가 있으면 테두리가 깔끔한 한 점으로 좁혀지지 않고 모양이 깨집니다. 같은 이유로 이 기법은 빈 <div>에서도, content: ""인 ::before/::after 가상 요소에서도 똑같이 잘 동작합니다. 실제 콘텐츠는 전혀 필요 없고 테두리 박스만 있으면 됩니다.

CSS border 속성에 대한 MDN 문서(developer.mozilla.org/en-US/docs/Web/CSS/border)에는 border-width, border-style, border-color가 어떻게 결합되는지, 그리고 인접한 면의 테두리가 어떻게 대각선으로 만나는지가 정리되어 있는데, 이 만나는 방식이 바로 이 기법 전체가 기대고 있는 기하학적 사실입니다.

CSS 삼각형이 자주 쓰이는 곳

• 툴팁·말풍선 포인터: 둥근 박스 가장자리에 배경색과 맞춘 작은 삼각형(6~10px)을 배치합니다.
• 드롭다운·셀렉트 캐럿: 버튼이나 select 요소 옆에 작은 아래쪽 삼각형을 두어 메뉴가 열린다는 걸 알려줍니다.
• 아코디언/펼침 표시: 섹션이 펼쳐지면 아래를 가리키도록 회전하는 오른쪽 방향 삼각형.
• 커스텀 리스트 불릿: 브라우저 기본 불릿 대신 오른쪽을 가리키는 작은 삼각형으로 좀 더 독특한 리스트 스타일을 낼 수 있습니다.
• 간단한 배너/리본 코너: 카드 모서리에 삼각형을 끼워 넣어 접힌 리본 효과를 흉내낼 수 있습니다.

다른 CSS 도구와 함께 사용하기

툴팁 포인터로 쓰이는 삼각형은 대개 함께 붙는 박스와 시각적으로 어울리도록 맞춘 그림자가 필요한데, Box Shadow Generator로 그 그림자를 만들 수 있습니다. 삼각형을 넘어서는 UI 도형(쉐브론, 별, 육각형 등)을 만들어야 한다면 테두리 트릭을 더 쌓기보다는 clip-path를 쓰는 편이 대체로 더 현대적이고 나은 방법입니다.

→ 박스 섀도우 생성기 · Border Radius 생성기

자주 묻는 질문