Softonic

CSS 삼각형 생성기

단계 1 / 2
다음

고전적인 CSS 삼각형은 사실 삼각형이 아닙니다. 폭 0, 높이 0인 요소에 투명한 border 3개와 한 점에서 만나는 색상 border 1개를 둔 것입니다. 이 생성기는 선택한 픽셀 값으로 크기를 정하고 고른 색상으로 채워, 네 방향(위, 아래, 왼쪽, 오른쪽)으로 해당 선언을 출력합니다. 툴팁 화살표, 말풍선, 브레드크럼 구분자에 적합합니다.

border 삼각형 만드는 방법

  1. 1

    방향 선택

    위, 아래, 왼쪽 또는 오른쪽. 방향이 어떤 border에 색상이 적용되고 어떤 3개가 투명하게 유지되는지 결정합니다.

  2. 2

    크기 설정

    크기 값은 모든 border 폭에 사용됩니다. 60px 삼각형은 폭(또는 방향에 따라 높이)이 120px가 됩니다.

  3. 3

    채우기 색상 선택

    색상 입력은 hex 값(예: `#10b981`)만 지원합니다. rgb, rgba, 명명된 색상은 지원되지 않습니다. 색상은 반대편 border에만 적용됩니다.

  4. 4

    CSS 규칙 복사

    출력은 완전한 `.triangle { ... }` 규칙 세트입니다. 스타일시트에 넣고 필요한 곳에 `<div class="triangle"></div>`를 추가하세요.

border 트릭이 작동하는 이유

박스가 width: 0, height: 0이면 네 개의 border가 단일 중심점에서 만납니다. border는 45도로 맞물리기 때문에 각 border는 이미 삼각형입니다. 단지 그중 셋이 보이지 않을 뿐입니다. border 하나에 색을 주면 그 삼각형 하나가 보입니다.

방향 매핑

방향 보이는 border 투명한 border
위 border-bottom border-left, border-right, border-top
아래 border-top border-left, border-right, border-bottom
왼쪽 border-right border-top, border-bottom, border-left
오른쪽 border-left border-top, border-bottom, border-right

크기 계산

투명한 border 3개는 크기 값을 공유합니다. 보이는 border도 같은 크기를 사용합니다. 따라서 size: 60인 삼각형은:

  • 폭 = 2 × 60 = 120px (위/아래 삼각형)
  • 높이 = 2 × 60 = 120px (왼쪽/오른쪽 삼각형)

비대칭 삼각형(밑변은 좁고 꼭지점은 높은)이 필요하면 투명 border에 한 크기를, 보이는 border에 다른 크기를 주세요. 예를 들어 border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red;는 길고 좁은 위쪽 삼각형을 만듭니다.

SVG가 더 나은 경우

  • 점이 셋이 아니라 여러 개 필요할 때, <polygon>을 사용하세요.
  • 삼각형이 부모와 함께 유동적으로 확대돼야 할 때, viewBox와 preserveAspectRatio를 사용하세요.
  • 그라데이션 채우기, 스트로크, 둥근 꼭지점이 필요할 때, CSS border로는 어느 것도 할 수 없습니다.

자주 묻는 질문

border만으로는 안 됩니다. border 폭은 잘 지원되는 방식으로 %나 vw를 허용하지 않습니다. 유동적 확대가 필요하면 SVG <polygon>으로 전환하거나 일반 요소에 clip-path: polygon(...)을 사용하세요.

border가 만나는 모서리는 둥글게 할 수 없습니다. 스트로크된 path와 stroke-linejoin: round가 적용된 SVG를 사용하거나, clip-path: polygon(...)에 약간의 filter: drop-shadow를 결합해 가장자리를 가리세요.

네, 가장 흔한 사용 사례입니다. 삼각형을 툴팁 가장자리에 절대 위치로 두고 채우기 색상을 툴팁 배경과 맞춰 하나의 말풍선처럼 보이게 하세요.

네. 선택한 방향, 크기, 색상은 CSS를 만들기 위해 페이지 요청과 함께 서버로 전송됩니다. 단계별 흐름에서는 페이지 링크에도 담깁니다. 저장되지는 않습니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

랜덤 색상 팔레트 생성기

2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.

이 도구는 다른 언어로도 제공됩니다