AZ Tools

CSS 삼각형 생성기

색상

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

—

미리보기

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를 프로젝트에 복사.

자주 묻는 질문

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

관련 도구

색맹 시뮬레이터

8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.

색상00

CSS Box Shadow 생성기

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

색상00

컬러 포맷 변환기

어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.

색상00

CSS 그라디언트 생성기

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

색상00

컬러 팔레트 생성기

기준 색에서 여섯 가지 배색으로 조화로운 팔레트를 만드세요.

색상00

색상 대비 검사기

글자/배경 대비를 WCAG AA·AAA 기준으로 검사하세요.

색상00