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를 만들기 위해 페이지 요청과 함께 서버로 전송됩니다. 단계별 흐름에서는 페이지 링크에도 담깁니다. 저장되지는 않습니다.

관련 도구

보색 찾기

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

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

텍스트 파일 인코딩 변환기

깨진 문자를 고치기 위해 텍스트를 UTF-8, UTF-16, Latin-1, Windows-1252 등 여러 인코딩 사이에서 변환하세요.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

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