실시간 미리보기가 있는 CSS 삼각형 생성기
border 트릭으로 순수 CSS 삼각형을 생성하세요 — 방향, 너비, 높이, 색상을 고르면 실시간 미리보기를 보고 CSS를 복사할 수 있습니다. 100% 브라우저에서 실행되며 업로드되지 않습니다.
CSS 삼각형 생성기
미리보기
.triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 40px solid #3b82f6;
}🔒 브라우저에서 생성되며 업로드되지 않습니다.
이 CSS 삼각형 생성기의 기능
CSS에서 삼각형은 이미지 없이도 만들 수 있습니다. 요소의 너비와 높이를 0으로 만들고 테두리 하나에만 색을 입히면 됩니다. 각 테두리가 이웃한 테두리와 대각선으로 맞닿기 때문에, 두 개의 투명한 테두리 옆에 두꺼운 색 테두리를 두면 삼각형 모양으로 렌더링됩니다. 삼각형이 가리킬 방향을 정하고 밑변 너비와 높이를 설정한 뒤 색상을 고르면, 이 도구가 정확한 선언 블록을 만들어 주고 실시간 미리보기로 복사 전에 모양을 확인할 수 있습니다. 입력하는 즉시 모든 것이 갱신됩니다.
border 트릭의 원리
색이 입혀지는 테두리는 언제나 삼각형이 가리키는 방향의 반대쪽입니다. 위를 향하는 삼각형은 border-bottom에, 아래를 향하는 삼각형은 border-top에 색을 주고, 왼쪽·오른쪽 삼각형은 각각 반대쪽 옆 테두리에 색을 줍니다. 나머지 두 수직 테두리는 transparent로 설정되며, 이 두 테두리의 합친 두께가 삼각형의 밑변을, 색 테두리가 길이를 결정합니다. 입력한 너비는 두 투명 테두리로 나뉘고 높이는 색 테두리가 되므로, 보이는 삼각형이 지정한 크기와 일치합니다.
자주 묻는 질문
이미지나 SVG 대신 왜 border를 쓰나요?
CSS border 삼각형은 별도 파일이 필요 없고 어떤 크기에서도 선명하게 확대되며 색을 쉽게 상속받고 네트워크 요청이 전혀 없습니다. 작은 화살표, 툴팁 꼬리, 드롭다운 캐럿을 스타일시트 안에서 직접 그리는 가장 가벼운 방법입니다.
나중에 CSS로 삼각형 색을 바꿀 수 있나요?
네. 색은 테두리 하나에만 있으므로 hover나 다크 모드 규칙에서 그 테두리의 border-color 속성 하나만 재정의하면 됩니다. 예를 들어 위를 향하는 삼각형이라면 border-bottom-color를 바꾸면 됩니다.
입력한 내용이 서버로 업로드되나요?
아니요. 방향, 크기, 색상, 생성된 CSS는 모두 브라우저에서 JavaScript로 로컬 처리됩니다. 입력한 어떤 것도 전송·저장·업로드되지 않습니다.