UTILS.
100% 브라우저 내 실행

CSS 삼각형 생성기

원하는 방향으로 순수 CSS 삼각형을 생성하고 CSS를 복사하세요.

이 도구에 대하여

고전적인 border 트릭을 사용해 순수 CSS 삼각형을 만드세요. 방향, 크기, 색상을 선택한 뒤 규칙을 복사하세요. 미리보기가 실시간으로 갱신되며 모든 것이 브라우저에서 실행됩니다.

자주 묻는 질문

border 트릭은 어떻게 작동하나요?
너비와 높이가 0인 요소는 테두리만 보입니다. 세 개의 테두리를 투명하게 만들면 색이 있는 하나의 테두리가 삼각형 모양으로 남습니다.
너비와 높이를 왜 0으로 설정하나요?
박스 영역이 없으면 테두리들이 중앙에서 만나므로, 보이는 하나의 테두리가 두꺼운 가장자리가 아닌 깔끔한 삼각형이 됩니다.

더 많은 도구