🔺 CSS 삼각형 생성기 | border 코드 바로 복사

도형 종류와 방향

밑변 길이 (뾰족한 방향과 직각인 변)

높이 (뾰족한 쪽으로의 길이)

도형 색

CSS로 삼각형을 만들 때 가장 널리 쓰이는 방법이 border 트릭입니다. 요소의 width와 height를 0으로 만들면 네 방향 테두리가 한 점에서 만나 각각 삼각형 모양이 되는데, 보이고 싶은 한 방향만 색을 주고 나머지를 transparent로 두면 삼각형이 남습니다. 도형 종류와 방향, 밑변, 높이, 색을 넣으면 선언 전체를 만들어 줍니다.

이등변 삼각형은 밑변을 절반으로 나눠 양쪽 테두리에 넣고, 뾰족한 쪽의 반대편 테두리에 높이를 넣습니다. 위를 향하는 삼각형이 border-bottom을 쓰는 이유가 여기에 있습니다. 직각삼각형은 한쪽 투명 테두리를 없애 밑변 전체를 한 변으로 씁니다. 요소가 실제로 차지하는 크기는 좌우 테두리 합 × 상하 테두리 합이며, 이 동작은 W3C CSS Backgrounds and Borders 의 테두리 모서리 규정에 따릅니다(2026년 10월 기준).

border 트릭으로 만든 도형에는 border-radius·그라디언트·외곽선을 적용할 수 없습니다. 둥근 꼭짓점이나 그라디언트가 필요하면 clip-path나 SVG를 쓰세요. 이 도구는 사각형·원·별 같은 다각형 생성은 지원하지 않고 삼각형과 직각삼각형만 다룹니다. 생성한 코드는 출발점이므로 레이아웃·접근성 요구사항은 직접 확인하세요.

자주 묻는 질문

왜 width와 height를 0으로 두나요?

테두리는 내용 영역을 둘러싸는 사다리꼴입니다. 내용 영역이 한 점으로 줄어들면 사다리꼴의 짧은 변이 사라져 삼각형만 남습니다.

삼각형 크기를 반응형으로 바꿀 수 있나요?

테두리 두께에 em·rem이나 CSS 변수를 쓰면 글자 크기나 테마에 따라 같이 변합니다. 다만 테두리 두께에는 % 단위를 쓸 수 없습니다.

말풍선 꼬리에도 쓸 수 있나요?

content를 빈 문자열로 둔 ::before나 ::after에 같은 선언을 넣으면 꼬리가 됩니다. 꼬리 위치 좌표 계산은 이 도구가 하지 않습니다.

🔺CSS 순수 도형(삼각형) 코드 생성기

관련된 도구

CSS 툴팁 코드 생성기

CSS Flexbox 레이아웃 코드 생성기

자주 묻는 질문

관련된 도구

CSS 툴팁 코드 생성기

CSS Flexbox 레이아웃 코드 생성기

자주 묻는 질문

같은 카테고리 도구