ifBuyz Tools
디자인

CSS 삼각형 생성기

입력

방향, 밑변 너비, 높이, 색상을 설정하세요.

방향
Base Width60px
높이80px

생성된 CSS를 복사해 빈 요소에 적용하세요.

출력

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 80px solid #6366f1;
}

자주 묻는 질문

CSS 삼각형은 어떤 원리인가요?
폭/높이 0 요소의 border를 이용해 한 방향 border만 색을 주는 방식으로 삼각형을 만듭니다.
언제 SVG 대신 CSS 삼각형을 쓰나요?
툴팁 꼬리 같은 단순 도형에는 CSS가 빠르고 가볍습니다. 복잡한 도형은 SVG가 유리합니다.
삼각형을 가운데 정렬하려면?
부모 relative + 요소 absolute로 두고 left 50% + transform translateX(-50%) 같은 패턴을 사용합니다.