ZeroTool Workbench
CSS 삼각형 생성기
border hack을 사용하여 어떤 방향의 CSS 삼각형도 생성. 방향, 크기, 색상을 선택하면 즉시 CSS 코드를 얻을 수 있습니다. 무료 온라인 도구.
사용 방법
- 3×3 방향 그리드에서 버튼을 클릭하여 삼각형이 가리킬 방향을 선택합니다.
- 너비와 높이를 픽셀로 설정하여 삼각형 크기를 조정합니다.
- 색상 피커를 사용하거나 16진수 색상 값을 직접 입력합니다.
- 라이브 미리보기는 대비 배경과 함께 즉시 업데이트되어 라이트/다크 모드 모두에서 삼각형을 명확하게 확인할 수 있습니다.
- CSS 블록 옆의 복사를 클릭하여
.triangle { … }규칙을 복사하거나, HTML 사용법 스니펫을 별도로 복사합니다.
생성된 CSS 이해하기
생성된 규칙은 항상 width: 0과 height: 0으로 시작합니다.
기본 방향(위, 오른쪽, 아래, 왼쪽)에서는 두 개의 투명 border가 삼각형의 밑변 너비를 정의하고,
하나의 실색 border가 높이를 정의합니다.
모서리 방향(예: 왼쪽 위)에서는 하나의 실색 border와 하나의 투명 border가 모서리에서 직각삼각형을 형성합니다.
출력을 스타일시트에 붙여넣고 .triangle을 자신의 클래스 이름으로 변경하세요.
주요 사용 사례
CSS 삼각형은 툴팁 화살표, 드롭다운 캐럿 지시자, 장식적인 섹션 구분선, 브레드크럼 구분자, 말풍선 꼬리 등에 사용됩니다. 이미지 없이 순수 CSS로 구현되어 즉시 로드되며 CSS 변수로 손쉽게 테마를 적용할 수 있습니다.
FAQ
CSS 삼각형 트릭은 어떻게 작동하나요?
CSS 삼각형은 요소의 width와 height를 0으로 설정하고 border를 사용하여 모양을 만듭니다. 인접한 border가 투명한 각도로 만나면 삼각형 모양이 형성됩니다. 예를 들어 왼쪽과 오른쪽 border를 투명하게 하고 아래 border를 실색으로 설정하면 위를 향하는 삼각형이 만들어집니다.
CSS 삼각형의 border hack이란 무엇인가요?
border hack은 요소의 크기를 0으로 설정하고 border를 선택적으로 적용하는 기법입니다. 실색 border는 보이는 면을, 투명 border는 보이지 않는 면을 형성합니다. 각 border의 크기가 삼각형의 너비와 높이를 제어합니다. 이미지나 SVG 없이 순수 CSS로 구현됩니다.
각 방향에서 width와 height는 무엇을 제어하나요?
위아래 삼각형에서 width는 전체 가로 폭을, height는 삼각형의 높이를 설정합니다. 좌우 삼각형에서 width는 삼각형이 뻗어나가는 너비를, height는 전체 세로 높이를 설정합니다. 모서리 방향(예: 왼쪽 위)에서는 width와 height 모두 삼각형을 잘라내는 모서리 정사각형의 크기를 제어합니다.
CSS 삼각형과 SVG 삼각형 중 무엇을 사용해야 하나요?
CSS 삼각형은 외부 자산이 필요 없어 툴팁 화살표, 배지, 포인터, 구분선 같은 작은 장식 요소에 적합합니다. SVG 삼각형은 임의 회전, 그라디언트, 또는 코드 수정 없이 크기 조절이 필요할 때 더 적합합니다. 단순한 방향 지시에는 CSS border hack이 가장 간단하고 가벼운 선택입니다.
CSS 삼각형은 다크 모드에서 사용할 수 있나요?
네. 삼각형은 border로 형성되기 때문에 CSS 사용자 정의 속성이나 다크 모드 미디어 쿼리로 border 색상을 재정의할 수 있습니다. 예를 들어 색상 값에 CSS 변수를 사용하면 라이트/다크 테마 사이에서 자동으로 전환됩니다.