UTILS.
기본부터 지키는 개인정보
▲

CSS 삼각형 생성기

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

파일은 이 기기에만 남습니다

파일은 브라우저에서 처리되며 업로드되지 않습니다. 사이트는 도구 실행에 필요한 코드와 리소스를 다운로드합니다. 계정이나 추적은 없습니다.

다운로드를 눌러 이 도구를 하나의 HTML 파일로 저장하고 오프라인으로 사용하세요.

개인정보 →

이 도구에 대하여

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

자주 묻는 질문

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

더 많은 도구