CSS 삼각형 생성기
border 트릭을 사용해 순수 CSS 삼각형을 생성합니다. 방향, 크기, 색상을 선택하고 CSS를 즉시 복사하세요.
CSS 삼각형은 border 트릭을 사용합니다. 크기가 0인 요소의 세 면에는 투명 테두리를, 한 면에는 단색을 적용하면 삼각형이 만들어집니다. SVG나 이미지가 필요하지 않습니다.
사용 방법
border 트릭을 사용해 순수 CSS 삼각형을 생성합니다. 방향, 크기, 색상을 선택하고 CSS를 즉시 복사하세요.
- 1삼각형 방향을 선택하세요 — 위, 아래, 왼쪽, 오른쪽, 또는 직각 삼각형을 위한 모서리 방향.
- 2너비와 높이 슬라이더를 드래그하여 삼각형의 크기를 픽셀로 설정하세요.
- 3색상 선택기나 16진수 값을 입력하여 색상을 선택하세요.
- 4투명 보더를 볼 수 있도록 체크무늬 배경 위에서 실시간 미리보기가 업데이트됩니다.
- 5'복사' 버튼을 클릭하여 생성된 CSS 클래스를 클립보드에 복사하고 스타일시트에 붙여넣으세요.
주요 기능
- 8가지 방향 — 4개 기본 방향(위/아래/왼쪽/오른쪽)과 4개 모서리 기반 직각 삼각형
- 체크무늬 배경 위 실시간 미리보기 — 어떤 보더가 투명이고 어떤 것이 색상인지 확인
- 독립적인 너비와 높이 — 양쪽 모두 400px까지 슬라이더로 조정 가능
- 순수 CSS 출력 — SVG, 이미지, JavaScript 런타임 없음; 0 크기 요소의 보더만 사용
- 색상 선택기와 16진수 입력 — 시각적으로 선택하거나 정확한 브랜드 색상을 붙여넣기