작업 경로 / 입력에서 결과까지
CSS 삼각형을 만드는 방법
- 01
방향 선택하기
「방향」에서 위, 오른쪽, 아래, 왼쪽 중 하나를 고르세요. 미리보기는 즉시 갱신됩니다. 이 기법은 한쪽 테두리에만 색을 입히고 이웃한 테두리는 투명하게 유지합니다. 작업 공간은 위를 향한 삼각형으로 시작합니다.
- 02
크기 설정하기
「밑변 너비」와 「삼각형 높이」를 각각 8~180 px 범위에서 1 px씩 조절하세요. 위/아래 방향에서는 너비가 밑변, 높이가 꼭짓점까지의 거리예요. 왼쪽/오른쪽 방향에서는 높이가 세로 밑변, 너비가 가로로 뻗는 거리예요. 기본 크기는 가로 72 px, 세로 64 px입니다.
- 03
채우기 색상 선택하기
「채우기 색상」을 원하는 6자리 16진수 값으로 설정하세요. 기본값은 #0f4cff입니다. 실시간 미리보기와 생성되는 border-color 선언은 항상 동기화되므로, 보이는 그대로가 복사됩니다.
- 04
미리보기 상태 확인하기
실시간 미리보기는 변경할 때마다 다시 렌더링되고, 모든 값이 범위 안이면 상태 배지가 「유효한 CSS」로 표시됩니다. 범위를 벗어난 값이 있으면 「값 확인」으로 바뀌고, 강조된 컨트롤을 수정하기 전까지 복사와 다운로드가 막혀요.
- 05
샘플 프리셋 사용해 보기
「샘플 불러오기」는 오른쪽 방향 삼각형을 설정해요. 가로로 뻗는 거리는 104 px, 세로 밑변은 86 px, 채우기 색은 #ffd11a예요. 「초기화」로 기본값에 돌아갑니다.
- 06
CSS 복사 또는 다운로드하기
「CSS 복사」를 눌러 .triangle 규칙을 클립보드에 복사하거나, 「.css 다운로드」를 눌러 toolars-triangle.css로 저장하세요. 이 규칙은 너비와 높이를 0으로 설정하고 네 개의 테두리를 선언하므로, 어떤 스타일시트에도 바로 붙여 넣을 수 있습니다.