왜 border 트릭이 되나요?

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

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

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

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

CSS 삼각형 생성기

고전 CSS 삼각형 트릭: 크기 0인 요소에 두꺼운 색 border를 주면, 색 칠한 변의 반대 방향을 가리키는 삼각형이 나타남. 이 도구는 8방향(상하좌우 + 4개 직각 코너 삼각형), 크기 슬라이더, 색 선택기 제공. 'clip-path' 토글로 현대적 대안 사용 — 같은 모양, border 적고 width/height로 크기 조절 쉬움.

—

방향

크기: 80px색

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 — 투명 변들이 상쇄되며 색 칠한 삼각형만 남습니다.

사용법

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

자주 묻는 질문

왜 border 트릭이 되나요?: 0폭 요소에 두꺼운 border를 주면 한 점에서 만나는 4개 삼각형으로 렌더링됩니다. 3개는 투명, 1개만 색을 주면 그 색 삼각형만 보임.
border vs clip-path?: border는 더 오래됐고(IE6도 됨) 안티앨리어싱 미세 차이. clip-path는 깔끔하고 배경·이미지와 조합 쉬움 — 신규 코드는 이쪽.
회전도 되나요?: 비표준 각도는 clip-path 모드에서 polygon 점 조정. 포함된 8방향이 화살표·툴팁·브레드크럼 등 대부분 커버.
브라우저 지원?: border 삼각형은 어디서나. clip-path는 2016년 이후 모든 브라우저 — 2026년 어디서나 안전.

CSS 삼각형 생성기

사용법

자주 묻는 질문

관련 도구

Border Radius 생성기

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

CSS 그라디언트 생성기

CSS Box Shadow 생성기

CSS 필터 플레이그라운드

CSS Cubic-Bezier 곡선 생성기