CSS 삼각형 생성기

생성된 CSS 읽는 법

생성된 규칙은 항상 width: 0과 height: 0으로 시작합니다. 요소에 내용 영역이 없으므로 상자 전체가 테두리로 채워집니다. 위·오른쪽·아래·왼쪽 네 방향은 테두리 세 개를 씁니다. 투명한 두 테두리를 더한 값이 밑변 길이이고, 실색 테두리 하나의 두께가 삼각형의 높이입니다. 네 모서리 방향은 실색 하나와 투명 하나, 두 테두리만 써서 직사각형의 한 모서리에서 직각삼각형을 잘라 냅니다. 복사한 뒤 .triangle을 원하는 클래스 이름으로 바꾸면 됩니다.

KRDS 색상으로 드롭다운 캐럿 만들기

정부 디자인 시스템 KRDS의 krds-uiux 1.1.0 krds_tokens.css에는 primary 색상 단계 중 --krds-color-light-primary-50이 #256ef4로 정의되어 있습니다. 이 색으로 선택 상자 오른쪽에 붙일 아래 방향 캐럿을 만들어 보겠습니다. 방향은 「아래」, 너비 10, 높이 6입니다.

.triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #256ef4;
}

너비 10은 왼쪽과 오른쪽 투명 테두리 5px씩으로 나뉘고, 위 테두리 6px이 캐럿의 높이가 됩니다. 너비가 짝수라서 꼭짓점이 정확히 가운데에 옵니다. 캐럿이 펼침 상태를 알려 주는 유일한 표시라면 화면 낭독기 사용자를 위해 aria-expanded나 텍스트로도 상태를 전달해야 합니다.

말풍선 모서리 꼬리

메신저 말풍선처럼 모서리에서 뾰족하게 나오는 꼬리는 모서리 방향으로 만듭니다. 방향 「왼쪽 위」, 너비 16, 높이 10, 색상은 KRDS 같은 파일의 --krds-color-light-gray-90 값 #1e2124입니다.

.triangle {
  width: 0;
  height: 0;
  border-top: 10px solid #1e2124;
  border-right: 16px solid transparent;
}

위 테두리 10px과 오른쪽 투명 테두리 16px이 만나는 사선이 16 × 10 직사각형을 대각선으로 나눕니다. 그래서 직각은 왼쪽 위에 있고, 가로 16px·세로 10px인 직각삼각형이 남습니다. 너비와 높이가 다르면 두 직각변의 길이도 달라집니다.

홀수 크기와 반 픽셀

위아래 방향에서 너비를 홀수로 주면 두 투명 테두리를 똑같이 나눌 수 없습니다. 도구는 내림과 올림으로 나누어 합계를 입력값과 같게 맞춥니다. 너비 11, 높이 6으로 위 방향을 만들면 5px과 6px이 됩니다.

.triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #256ef4;
}

밑변은 11px 그대로지만 꼭짓점은 가운데보다 0.5px 왼쪽에 놓입니다. 5.5px씩 쓰는 방법은 통하지 않습니다. 브라우저는 테두리 두께를 정수 디바이스 픽셀로 내림하므로(CSS Backgrounds and Borders Level 3) 일반 화면에서는 밑변이 10px이 됩니다. 꼭짓점을 가운데에 두려면 위아래 방향은 너비를, 좌우 방향은 높이를 짝수로 하세요.

제한

• 색은 한 가지만 됩니다. 테두리 하나에는 색이 하나뿐이라 그라디언트, 이미지 채우기, 외곽선, 사선을 따르는 box-shadow를 만들 수 없습니다. 이런 효과가 필요하면 clip-path 생성기에서 clip-path: polygon(50% 0, 100% 100%, 0 100%)처럼 잘라 내세요.
• 크기는 1~500 사이의 정수 픽셀입니다. 너비나 높이가 비어 있거나 0, 음수, 소수, 500을 넘는 값이면 생성된 CSS 아래에 오류가 표시되고 CSS와 미리보기가 지워지며, 올바른 값으로 고치면 다시 나타납니다.
• 크기는 픽셀만 됩니다. 테두리 두께에는 퍼센트를 쓸 수 없으므로 테두리 삼각형은 부모 요소에 맞춰 늘어나지 않습니다.
• 색상은 # 뒤 6자리 16진수만 받습니다. 3자리 축약형, 8자리 hex, 전각 문자를 입력하면 이전 색상이 유지되고 상태 줄에 안내가 표시됩니다. currentColor나 CSS 변수를 쓰려면 복사한 CSS를 직접 고칩니다.
• HTML은 항상 <div class="triangle"></div>입니다. 다른 클래스 이름을 쓰면 HTML과 CSS를 함께 바꾸세요.

주요 사용 사례

CSS 삼각형은 툴팁 화살표, 드롭다운 캐럿, 브레드크럼 구분자, 말풍선 꼬리 등에 쓰입니다. 테두리만으로 그리므로 이미지를 불러올 필요가 없고, CSS 변수로 테마에 맞춰 색을 바꿀 수 있습니다.