CSS 삼각형 생성기 - Border Trick으로 CSS 삼각형 만들기 온라인
Border trick과 clip-path polygon으로 CSS 삼각형을 생성하세요. 8방향, 3가지 삼각형 유형, 다양한 출력 형식 — 100% 클라이언트 사이드, 서버로 데이터를 전송하지 않습니다.
자주 묻는 질문
CSS 삼각형이란 무엇이며 어떻게 작동하나요?
CSS 삼각형은 이미지나 SVG 없이 순수 CSS만으로 만든 삼각형 도형입니다. 가장 일반적인 기법은 "border trick"입니다: 요소의 너비와 높이가 0일 때 테두리가 대각선 이음새로 만납니다. 네 개의 테두리 중 세 개를 투명하게 하고 하나에 색을 입히면 보이는 테두리가 삼각형 모양을 형성합니다.
이 CSS 삼각형 생성기는 어떻게 사용하나요?
1. 방향 패드를 사용하여 삼각형 방향을 선택합니다 (위, 아래, 왼쪽, 오른쪽 또는 대각선). 2. 삼각형 유형을 선택합니다: 정삼각형, 이등변삼각형 또는 부등변삼각형. 3. 슬라이더나 숫자 입력으로 너비와 높이를 조정합니다. 4. 색상 선택기로 색상을 고르거나 HEX 값을 입력합니다. 5. 미리보기에서 실시간으로 삼각형 업데이트를 확인합니다. 6. 생성된 CSS 코드를 원클릭으로 복사하여 스타일시트에 붙여넣습니다.
데이터가 안전한가요? 서버로 전송되는 것이 있나요?
네, 데이터는 완전히 안전합니다. 이 도구는 클라이언트 사이드 JavaScript로 브라우저에서 전적으로 실행됩니다. 설정 데이터, 색상 또는 생성된 CSS가 서버로 전송되지 않습니다. 모든 처리는 사용자의 기기에서 로컬로 이루어집니다.
border trick과 clip-path 방식의 차이는 무엇인가요?
Border trick은 고전적인 접근법으로, 너비와 높이가 0인 요소를 만들고 테두리 너비와 색상으로 삼각형을 형성합니다. IE6까지 지원하는 뛰어난 브라우저 호환성이 있지만, 요소에 실제 영역이 없어 box-shadow나 background-image를 적용할 수 없습니다. Clip-path 방식은 clip-path: polygon()으로 일반 요소를 삼각형 모양으로 잘라냅니다. 배경, 그라데이션, 그림자를 사용할 수 있고 요소가 크기를 유지하지만, 최신 브라우저가 필요합니다.
CSS 삼각형은 언제 사용하나요?
CSS 삼각형은 다음에 일반적으로 사용됩니다: 툴팁 화살표와 콜아웃 포인터, 드롭다운 메뉴 표시기, 브레드크럼 탐색 구분자, 아코디언 확장/축소 표시기, 말풍선 꼬리, 장식적 섹션 구분선, 단계/진행 표시기. 이미지 다운로드가 없어 가볍고, 모든 해상도에서 완벽하게 확대/축소됩니다.
CSS 삼각형에 box-shadow를 추가할 수 없는 이유는?
Border trick 삼각형은 너비와 높이가 0인 요소입니다. box-shadow 속성은 요소의 박스에 적용되는데, 영역이 없습니다. 그림자가 있는 삼각형을 만들려면 clip-path 방식을 사용하세요. 또는 filter: drop-shadow() 속성을 사용할 수 있는데, 이는 테두리를 포함한 요소의 시각적 윤곽을 따릅니다.
정삼각형, 이등변삼각형, 부등변삼각형이란?
정삼각형은 세 변의 길이가 모두 같고 모든 각이 60도입니다. 높이는 수학적으로 너비 × √3 / 2로 결정됩니다. 이등변삼각형은 두 변의 길이가 같고 세 번째 변이 다르며 대칭입니다. CSS 삼각형에서 가장 일반적입니다 (중심 화살표 등). 부등변삼각형은 세 변의 길이가 모두 다르며, 비대칭 또는 기울어진 화살표 모양에 유용합니다.
코드 예제
// CSS Triangle Generator - JavaScript Implementation
// Generate CSS triangle using the border trick
function generateTriangleCSS(direction, width, height, color) {
const styles = { width: '0', height: '0' };
const halfWidth = width / 2;
const halfHeight = height / 2;
switch (direction) {
case 'up':
styles['border-left'] = `${halfWidth}px solid transparent`;
styles['border-right'] = `${halfWidth}px solid transparent`;
styles['border-bottom'] = `${height}px solid ${color}`;
break;
case 'down':
styles['border-left'] = `${halfWidth}px solid transparent`;
styles['border-right'] = `${halfWidth}px solid transparent`;
styles['border-top'] = `${height}px solid ${color}`;
break;
case 'left':
styles['border-top'] = `${halfHeight}px solid transparent`;
styles['border-bottom'] = `${halfHeight}px solid transparent`;
styles['border-right'] = `${width}px solid ${color}`;
break;
case 'right':
styles['border-top'] = `${halfHeight}px solid transparent`;
styles['border-bottom'] = `${halfHeight}px solid transparent`;
styles['border-left'] = `${width}px solid ${color}`;
break;
}
return Object.entries(styles)
.map(([prop, value]) => `${prop}: ${value};`)
.join('\n');
}
// Generate clip-path polygon
function generateClipPath(direction, width, height, color) {
const points = {
up: '50% 0%, 100% 100%, 0% 100%',
down: '0% 0%, 100% 0%, 50% 100%',
left: '100% 0%, 100% 100%, 0% 50%',
right: '0% 0%, 100% 50%, 0% 100%',
};
return `width: ${width}px;\nheight: ${height}px;\nbackground: ${color};\nclip-path: polygon(${points[direction]});`;
}
console.log(generateTriangleCSS('up', 100, 87, '#3B82F6'));
// width: 0; height: 0;
// border-left: 50px solid transparent;
// border-right: 50px solid transparent;
// border-bottom: 87px solid #3B82F6;