2026년 순수 CSS 삼각형 — 보더 트릭이 여전히 통하는 이유 (그리고 안 통하는 경우)

프론트엔드 개발자의 경력은 삼각형이 필요할 때 무엇에 손이 가는지로 추측할 수 있다는 농담을 하곤 합니다. <svg> 요소로 직행한다면 아마 2018년 이후에 CSS를 배웠을 겁니다. clip-path: polygon(...)을 사용한다면 2015-2018년경에 일을 시작했을 겁니다. 본능적으로 이상한 보더 선언이 있는 <div>로 손이 간다면 오랫동안 이 일을 해온 사람일 겁니다.

"이상한 보더 선언" 버전 — CSS 삼각형 보더 트릭 — 이 셋 중 가장 오래되었지만 작은 UI 요소에 여전히 제 기본 선택입니다. 이 가이드는 왜 작동하는지, 언제 적합한지, 언제 그렇지 않은지, 그리고 ToolBox Hubs의 CSS 삼각형 생성기로 수학을 건너뛰는 방법을 설명합니다.

트릭, 간단히

너비와 높이가 0인 div를 가져옵니다. 보더를 줍니다. 보더는 확장될 곳이 없으므로 중앙으로 압축되며, 각 보더는 다른 것들과 45도 대각선으로 만나는 삼각형이 됩니다.

.demo {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid blue;
  border-bottom: 50px solid green;
  border-left: 50px solid yellow;
}

중앙에서 만나는 네 개의 색상 삼각형으로 나뉜 정사각형이 나옵니다. 이제 그 중 셋을 투명하게 만듭니다:

.triangle-down {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-bottom: 0;
  border-left: 50px solid transparent;
}

아래를 가리키는 단일 빨간 삼각형이 남습니다. 그게 트릭입니다. 사양이 모서리에서 보더가 만나는 방식을 정의한 이래로 CSS에 있었고, 즉 IE6를 포함한 모든 브라우저에서 작동했습니다.

툴팁 화살표에 SVG보다 여전히 나은 이유

2026년에 웹 UI에서 삼각형을 그리는 합리적인 방법은 세 가지입니다:

1. 보더 트릭 — width: 0; border: ...
2. clip-path — 색상 요소에 clip-path: polygon(...)
3. SVG — <svg><polygon points="..." /></svg>

작은 방향 UI 요소(드롭다운 캐럿, 툴팁 화살표, 빵부스러기 구분자, 아코디언 셰브런)에는 보더 트릭이 보통 가장 좋습니다. 이유:

추가 DOM 노드 없음. 단지 스타일이 있는 div나 가상 요소입니다. SVG는 렌더 트리에 별도 노드를 추가하고, 내부 <polygon> 요소도 추가합니다. 화살표가 있는 툴팁의 경우 추가 노드 1개 대 2-3개입니다.

작은 조정으로 currentColor를 기본 상속. 보더 색상을 currentColor로 설정하면 삼각형이 부모의 텍스트 색상을 채택합니다. CSS 규칙을 다시 작성하지 않고 다크/라이트 모드 인계에 유용합니다.

SVG 네임스페이스 걱정 없음. xmlns가 필요 없고, viewBox를 생각할 필요 없으며, SVG가 인라인인지 스프라이트 참조인지 걱정할 필요 없습니다.

모든 줌 레벨에서 선명하게 렌더링. 보더 트릭은 가장 공격적으로 최적화된 렌더링 경로인 브라우저의 CSS 엔진에 의한 서브픽셀 렌더링을 사용합니다. SVG는 특히 오래된 브라우저의 1px 스케일에서 안티앨리어싱 아티팩트를 보여줄 수 있습니다.

버튼이거나 호버 효과가 있는 삼각형의 경우, 스타일링과 트랜지션 지원은 다른 모든 요소와 동일합니다 — :hover { border-bottom-color: blue }만으로 작동합니다.

clip-path 또는 SVG에 손을 뻗어야 할 때

한계에 대해 솔직히:

기본 삼각형이 아닌 모든 것. 별, 오각형, 복잡한 모양의 화살표, 곡선이 있는 모든 것. 보더 트릭은 수학적으로 삼각형 전용입니다. polygon()을 사용한 clip-path 또는 SVG에 손을 뻗으세요.

텍스트와 함께 크기가 변해야 하는 삼각형. 보더 트릭은 픽셀 값을 사용합니다. 부모 요소의 폰트 크기에 따라 크기가 변하는 삼각형이 필요하면 보더 너비로 em 또는 rem 단위를 사용할 수 있지만 어색합니다. viewBox가 있는 SVG가 스케일링을 더 자연스럽게 처리합니다.

둥근 모서리가 있는 삼각형. 보더 트릭으로는 모서리를 둥글게 할 방법이 없습니다. stroke-linejoin="round"가 있는 SVG path 또는 별도의 border-radius와 함께 clip-path가 갈 길입니다.

채우기와 다른 스트로크(외곽선)가 필요한 삼각형. 보더는 자체 보더를 가질 수 없습니다. SVG는 별도 속성으로 fill과 stroke를 가집니다 — 외곽선 화살표에 완벽합니다.

모양이 변하는 삼각형(모양 사이를 애니메이션). SVG는 path 사이를 부드럽게 변형할 수 있습니다. clip-path는 폴리곤 점 사이를 보간할 수 있습니다. 보더 기반 삼각형은 모양을 바꿀 수 없습니다 — 크기와 색상만.

UI 삼각형의 80%에는 이런 조건이 적용되지 않습니다. 단순한 케이스는 단순하게 유지됩니다.

수학 (또는: 왜 생성기가 필요한가)

보더 트릭의 함정: 원하는 방향에 맞는 보더 선언을 알아내는 것이 귀찮습니다.

위쪽을 가리키는 삼각형:

• 위 보더: 0
• 왼쪽 보더: 절반 너비 투명
• 오른쪽 보더: 절반 너비 투명
• 아래 보더: 전체 높이 단색

왼쪽을 가리키는 삼각형:

• 위 보더: 절반 높이 투명
• 오른쪽 보더: 전체 너비 단색
• 아래 보더: 절반 높이 투명
• 왼쪽 보더: 0

모서리 삼각형(모서리의 직각 삼각형):

• 인접한 두 보더 단색 (그 중 하나가 크기를 설정)
• 반대편 두 보더는 0
• ...잠깐, 그게 틀렸나, 찾아봐야겠다...

문제를 보실 수 있습니다. 모든 방향마다 어떤 보더가 색상이고, 어떤 것이 투명이고, 어떤 것이 0인지 자체 배열이 있습니다. 수학은 가능하지만 같은 삼각형 CSS를 세 번 다시 작성할 만큼 충분히 귀찮습니다.

이것이 CSS 삼각형 생성기의 스위트 스팟입니다. 방향을 선택하고, 너비와 높이를 설정하고, 색상을 선택하고, CSS를 복사합니다. 생성기가 보더 산술을 해줘서 당신은 안 해도 됩니다.

대부분의 사용 사례를 커버하는 8가지 방향

네 개의 기본 방향(위, 아래, 왼쪽, 오른쪽)은 요소의 중앙에 있는 이등변 삼각형을 만듭니다. 중앙 표시기에 원하는 것입니다: 버튼 아래의 드롭다운 화살표, 툴팁 포인터, 확장/축소 셰브런.

네 개의 모서리 방향(위-왼쪽, 위-오른쪽, 아래-왼쪽, 아래-오른쪽)은 모서리에 고정된 직각 삼각형을 만듭니다. 모서리 리본, 접힌 종이 효과, 배지 액센트, 셰브런 스타일 빵부스러기 구분자에 원하는 것입니다.

/* 오른쪽을 가리키는 화살표 (드롭다운 캐럿 생각) */
.caret-right {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid currentColor;
}

/* 모서리 리본 (위-오른쪽) — 우상단 모서리의 단색 삼각형 */
.ribbon {
  width: 0;
  height: 0;
  border-top: 60px solid #6366f1;
  border-left: 60px solid transparent;
}

생성기는 어떤 보더 구성이 어떤 방향을 만드는지 기억할 필요 없도록 통합 UI에서 8개 모두를 다룹니다.

실용적인 패턴

보더 트릭이 작동하는 모습을 보여주는 몇 가지 실제 스니펫.

툴팁 화살표

트리거 요소를 가리키는 화살표가 있는 툴팁. 화살표는 툴팁의 가상 요소입니다:

.tooltip {
  position: relative;
  background: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid #1f2937;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

border-top 색상이 툴팁 배경과 일치하므로 화살표가 같은 모양의 일부로 보입니다. 이것이 정식 사용 사례입니다.

빵부스러기 셰브런

빵부스러기 항목 사이의 클래식 ">" 구분자, 그러나 CSS로 그린 화살표로:

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}

.breadcrumb-item::after {
  content: '';
  display: inline-block;
  margin-left: 12px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #9ca3af;
}

.breadcrumb-item:last-child::after {
  display: none;
}

› 유니코드 문자를 사용할 수도 있지만 CSS 접근 방식은 정확한 크기 제어와 디자인 시스템 색상 정확한 일치를 제공합니다.

말풍선 꼬리

채팅 메시지 풍선의 꼬리:

.bubble {
  position: relative;
  background: #6366f1;
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 280px;
}

.bubble::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #6366f1;
  border-left: 8px solid transparent;
}

풍선의 좌하단에 고정된 "아래-오른쪽" 모서리 삼각형 모양이 SVG 없이 클래식한 말풍선 꼬리 모습을 줍니다.

흔한 실수

저에게 삼각형을 망가뜨린 것들:

width: 0; height: 0;을 빠뜨림. 이것 없이는 보더가 점으로 압축되지 않고 실제 박스 주위에 그려집니다. 삼각형 대신 프레임을 얻습니다.

border-color만 설정하고 border-width를 잊음. 너비가 0인 보더는 색상에 관계없이 그려지지 않습니다. 일부가 0이더라도 네 보더 모두 명시적인 너비가 필요합니다.

border-top을 삼각형의 위쪽으로 혼동. 삼각형은 색상 보더에서 멀리 가리킵니다. 단색 border-bottom은 위를 가리키는 삼각형을 만듭니다. 삼각형이 아래를 가리키게 하려면 단색 border-top을 사용하세요. 처음에는 모두를 걸려 넘어지게 합니다.

보더 너비 대신 width로 삼각형 크기 설정. width: 100px; height: 50px 설정은 유용한 일을 하지 않습니다 — 보더 트릭에는 요소가 여전히 0 크기여야 합니다. 삼각형의 "크기"는 전적으로 보더 너비로 제어됩니다.

색상에 호버 트랜지션이지만 border-color가 아님. transition: background-color 200ms는 보더 삼각형을 애니메이션하지 않습니다. 색상 변화 애니메이션을 위해 transition: border-color 200ms(또는 transition: all)를 사용하세요.

currentColor에 대한 노트

currentColor는 요소의 color 속성 값으로 해석되는 CSS 키워드입니다. 부모의 텍스트 색상과 일치해야 하는 삼각형에 매우 유용합니다:

.icon-only-button {
  color: #6366f1;
}

.icon-only-button::after {
  /* 이 삼각형이 버튼의 색상을 상속 */
  border-left: 8px solid currentColor;
}

.icon-only-button:hover {
  color: #4f46e5;
  /* 삼각형이 자동으로 새 색상으로 업데이트 */
}

이 패턴이 보더 삼각형이 테마 시스템 및 다크 모드와 잘 어울리게 합니다. 부모에 색상을 한 번 설정하면 모든 삼각형이 상속합니다. 각 삼각형 방향에 대한 별도의 다크 모드 CSS 규칙이 필요 없습니다.

잘 어울리는 도구

삼각형은 보통 더 큰 UI 퍼즐의 한 조각입니다. 이 도구들은 같은 워크플로우에서 자주 등장합니다:

• CSS Clip Path 생성기 — 삼각형보다 복잡한 모양(별, 오각형, 화살표)
• CSS 그라데이션 생성기 — 삼각형 뒤의 배경 채우기
• CSS Border Radius 생성기 — 날카로운 삼각형을 보완하는 둥근 모양
• 색상 선택기 — 브랜드 팔레트에서 정확한 삼각형 색상 다이얼링

CSS 삼각형 생성기는 무료이며, 완전히 브라우저에서 실행되고, 어떤 스타일시트에든 붙여넣을 수 있는 깔끔한 CSS를 출력합니다 — 프레임워크 종속성 없음, 전처리 없음, 빌드 단계 필요 없음. 방향을 선택하고, 크기 슬라이더를 드래그하고, 코드를 복사하세요.

2026년에도 여전히 사용하는 이유

프론트엔드 트렌드는 빠르게 움직입니다. 프레임워크는 왔다 갑니다. CSS 자체에 컨테이너 쿼리, :has(), 레이어드 스타일, 뷰 트랜지션이 추가되었습니다 — 현대 인터페이스를 작성하는 방식을 바꾸는 주요 기능들.

하지만 보더 트릭은 여전히 "UI 요소의 일부로 작은 삼각형이 필요하다"에 대한 올바른 답입니다. 작고, 빠르고, 잘 이해되며, 어디서나 작동합니다. 오래되었다는 사실이 문제가 아닙니다 — 첫 번째에 문제를 완전히 해결했다는 신호입니다. 일부 기법은 교체될 필요가 없습니다.

유연성이 필요할 때 SVG로, 삼각형이 아닌 모양이 필요할 때 clip-path로 손을 뻗으세요. 하지만 툴팁, 드롭다운, 빵부스러기에서 등장하는 삼각형 — 가장 일반적인 UI 삼각형 — 에는 보더 트릭이 여전히 가장 깔끔한 옵션입니다.