본문으로 건너뛰기
AZ Tools

CSS 삼각형 생성기

순수 CSS로 8방향 삼각형 — border 트릭 또는 clip-path, 규칙 복사 후 붙여넣기.

방향

미리보기

CSS
.triangle {
  width: 0;
  height: 0;
  border-bottom: 80px solid #5b8def;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

border 기반 삼각형은 크기 0 요소에 두꺼운 색 border — 투명 변들이 상쇄되며 색 칠한 삼각형만 남습니다.

사용법

  1. 방향 선택(▲▼◀▶ 또는 4개 코너).
  2. 크기와 색 설정.
  3. 필요하면 clip-path 모드로 더 깔끔하게.
  4. CSS를 프로젝트에 복사.

자세한 설명

펼치기

고전적인 CSS 삼각형 기법을 조절 가능하게 만들었습니다. 너비와 높이가 없지만 테두리가 두꺼운 요소는 그 테두리들이 만나는 모서리 말고는 아무것도 보이지 않습니다. 그중 셋을 투명하게 만들면 넷째가 색이 있는 쪽의 반대 방향을 가리키는 삼각형이 됩니다. 이 도구는 여덟 방향을 제공합니다. 상하좌우 네 방향과 직각으로 잘린 네 가지 모서리 모양이며, 크기 슬라이더와 색상 선택기가 함께 있습니다. 여기서 크기는 테두리 두께라는 점을 기억하세요. 상자 자체가 0이기 때문입니다. clip-path 전환이 없애 주는 어색함이 바로 이것입니다. 현대적인 방식은 width와 height로 크기를 정하는 평범한 상자이므로, 테두리 방식으로는 할 수 없는 방식으로 크기를 조절하고 border-radius를 주고 애니메이션을 넣을 수 있습니다.

자주 묻는 질문

왜 border 트릭이 되나요?

0폭 요소에 두꺼운 border를 주면 한 점에서 만나는 4개 삼각형으로 렌더링됩니다. 3개는 투명, 1개만 색을 주면 그 색 삼각형만 보임.

border vs clip-path?

border는 더 오래됐고(IE6도 됨) 안티앨리어싱 미세 차이. clip-path는 깔끔하고 배경·이미지와 조합 쉬움 — 신규 코드는 이쪽.

회전도 되나요?

비표준 각도는 clip-path 모드에서 polygon 점 조정. 포함된 8방향이 화살표·툴팁·브레드크럼 등 대부분 커버.

브라우저 지원?

border 삼각형은 어디서나. clip-path는 2016년 이후 모든 브라우저 — 2026년 어디서나 안전.

테두리로 만든 삼각형에 테두리나 그림자를 줄 수 있나요?

직접은 안 됩니다. 모양 자체가 테두리로 만들어져 있어 테두리를 그릴 것이 남아 있지 않고, box-shadow는 보이는 삼각형이 아니라 요소의 사각형을 따릅니다. 윤곽선이나 그림자가 필요하면 clip-path 방식을 쓰세요. 필터 기반 그림자는 잘라 낸 모양을 따라갑니다.

고밀도 화면에서 삼각형이 왜 흐릿한가요?

대각선 가장자리는 두 테두리가 만나는 경계선이라, 브라우저가 패스와는 다르게 안티에일리어싱합니다. 대개는 눈에 띄지 않지만, 드러난다면 크기를 반 픽셀 조정하거나 clip-path 방식으로 바꾸면 대체로 해결됩니다. 잘라 낸 패스는 맞닿은 두 개의 칠이 아니라 하나의 모양으로 래스터화되기 때문입니다.

관련 도구

Border Radius 생성기

코너 독립 드래그, 타원 반지름, CSS 복사 — 채팅 버블·필·블랍·탭 프리셋 포함.

색상·CSS

CSS clip-path 빌더 (원, 타원, 다각형, Inset)

CSS clip-path 속성의 시각 빌더 — 도형 선택 (원, 타원, inset, 다각형), 슬라이더나 미리보기 클릭으로 다각형 점 추가, 붙여넣기 바로 가능한 CSS 선언 복사. 10가지 도형 프리셋 (삼각형, 육각형, 별, 화살표, 말풍선, 십자 등) 포함.

색상·CSS

CSS 그라디언트 생성기

선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.

색상·CSS

CSS Box Shadow 생성기

여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.

색상·CSS

CSS 필터 플레이그라운드

blur·brightness·contrast·hue·sepia·invert 등 9개 필터 시각 조합 — CSS 또는 Tailwind 임의값으로 복사.

색상·CSS

CSS Cubic-Bezier 곡선 생성기

제어점을 드래그해 CSS 이징 곡선 설계 — 모션 미리보기, cubic-bezier() 값 복사.

색상·CSS