CSS 삼각형 생성기
변 또는 모서리 방향을 선택하고 밑변과 높이를 조정한 다음 크기가 0인 테두리 기법을 UI 표시나 장식 도형에 사용하세요.
실시간 미리보기
위쪽 삼각형
표시되는 모양은 너비와 높이가 0인 요소의 테두리로 만들어집니다. 투명한 테두리가 다른 면을 숨깁니다.
사용 방법
사용 방법
- 위, 아래, 왼쪽, 오른쪽 또는 모서리 방향을 선택합니다.
- 실시간 미리보기를 확인하며 밑변 너비, 높이, 색상을 설정합니다.
- HTML과 CSS를 복사하고 필요하면 자체 스타일시트에서 반응형 테두리 값을 지정합니다.
크기가 0인 요소가 삼각형이 되는 이유
생성 요소의 width와 height는 0입니다. 중앙에서 만나는 테두리 중 색이 있는 테두리가 삼각형 쐐기처럼 보입니다. 나머지 테두리는 투명하지만 공간을 차지하고 삼각형의 변을 정합니다.
방향, 밑변, 높이
위쪽과 아래쪽 삼각형은 같은 너비의 좌우 투명 테두리로 밑변을 만듭니다. 왼쪽과 오른쪽은 같은 너비의 위아래 투명 테두리를 사용합니다. 모서리 프리셋은 색이 있는 테두리 하나와 투명 테두리 하나로 직각 삼각형을 만듭니다. 로컬 미리보기를 읽기 쉽게 하도록 실용적인 8~240px 범위로 제한합니다.
반응형 경계
복사한 규칙의 테두리 너비는 고정 픽셀이며 부모 요소에 맞춰 자동으로 크기가 조절되지 않습니다. 반응형 레이아웃에서는 CSS 사용자 지정 속성에 값을 넣거나 미디어 쿼리와 clamp()로 주변 레이아웃을 조정하세요. 장식 삼각형을 상호작용 대상으로 삼기 전에 주변 텍스트, 포커스 링, 터치 영역, 확대, 좁은 화면을 확인하세요.
자주 묻는 질문
더 알아보기
일부 테두리를 생략하지 않고 투명하게 하는 이유는 무엇인가요?
투명 테두리도 기하학적 크기를 유지합니다. 같은 너비가 두 비스듬한 변을 만들고 색이 있는 테두리는 삼각형으로 보입니다.
말풍선 포인터로 사용할 수 있나요?
예. 생성한 장식 요소를 말풍선 옆에 배치하고 읽을 수 있는 내용이나 컨트롤의 포커스 표시를 가리지 않도록 하세요.
SVG나 다각형을 생성하나요?
아니요. 일반 HTML과 CSS 테두리를 생성합니다. 더 복잡한 모양, 선, 크기 조절 가능한 경로 편집에는 SVG 또는 clip-path를 사용하세요.