디자인 · 로컬 유틸리티
CSS Clip Path Generator
드래그, 키보드 또는 좌표로 다각형을 편집하세요. 네 가지 프리셋에서 시작해 clip-path 선언이나 전체 CSS를 로컬에서 복사합니다.
작업 경로 / 입력에서 결과까지
시작 모양 선택
로컬에서 실행 · 업로드 없음
네 가지 다각형을 비교한 다음 작업 공간에서 같은 값을 설정하세요. 각 미리보기와 CSS는 동일한 다각형을 사용합니다. 내보내는 상자의 초기 크기는 240 × 180 px입니다.
작업 공간에서 설정 조정육각형을 팀 아바타나 반복되는 배지에 사용하세요.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}기울어진 마름모를 작은 이미지나 장식에 사용하세요.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}꼭짓점이 네 개인 기울어진 도형으로 카드를 꾸며 보세요.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}배너의 가장자리가 다음 섹션을 가리키게 해 보세요.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}위 도형 중 하나의 CSS 뒤에 다음 규칙을 추가하세요. 이미지 경로와 대체 텍스트를 자신의 것으로 바꾸세요. 상자는 4:3 비율을 유지하며 object-fit: cover는 이미지를 늘리지 않고 잘라서 채웁니다. 백분율 좌표는 상자 크기에 맞춰 조정됩니다.
<img class="clipped-shape"
src="/your-image.jpg"
alt="이미지 설명"
width="240" height="180">.clipped-shape {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}네 가지 템플릿과 두 개의 슬라이더를 제공합니다. 자유로운 꼭짓점 편집, SVG 경로 가져오기, 곡선은 지원하지 않습니다. 조정한 규칙은 작업 공간의 CSS 복사 또는 .css 다운로드로 저장하세요.
작업 경로 / 입력에서 결과까지
육각형, 마름모, 평행사변형, 갈매기형을 선택하세요. 두 슬라이더는 프리셋을 조절하며 개별 꼭짓점을 편집하면 사용자 지정 다각형이 됩니다.
번호가 있는 꼭짓점을 드래그하거나 좌표를 입력하세요. 꼭짓점에 초점을 두고 방향키로 1%, Shift + 방향키로 10% 이동합니다. 추가하면 선택한 꼭짓점과 다음 꼭짓점 사이에 중점이 삽입됩니다.
전체 예제에는 선택한 색상, 240px 너비, 4:3 비율이 포함됩니다. 편집 영역은 화면에 맞게 조절됩니다.
내보내기 전에 모든 변을 확인하세요. 번호가 있는 핸들은 편집용이며 CSS에는 포함되지 않습니다.
CSS 출력: clip-path 선언만 / 전체 예제 CSS. 전체 예제에는 선택한 색상, 240px 너비, 4:3 비율이 포함됩니다. 편집 영역은 화면에 맞게 조절됩니다.
백분율 좌표는 요소 크기에 따라 조절됩니다. 선언을 기존 규칙에 붙여 넣거나 .clipped-shape 클래스를 사용하고 데스크톱과 모바일에서 확인하세요.
CSS clip-path 생성기 도구는 검증된 로컬 실행 경로를 사용하고, 숨겨진 입력 또는 출력 기록을 만들지 않습니다.
현재 브라우저 탭 안에서 실행됩니다.
사용 중인 도구 데이터는 Toolars 문서 기록으로 남지 않습니다.
프로필을 만들지 않고도 핵심 워크플로를 사용할 수 있습니다. 즐겨찾기는 로그인 후 계정에 동기화됩니다.
탭을 정리하면 사용 중이던 작업 데이터도 사라져요.
2026-09-24 로컬 브라우저 시험에서 기본 육각형(가로 24%, 세로 50%)으로 시작했습니다. 점 1을 선택하고 X를 24%에서 30%로 바꾼 뒤 색을 #ff6600으로 설정합니다. 미리보기에 clip-path polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%)의 주황색 여섯 꼭짓점 다각형이 나타나며 나머지 다섯 점 순서는 유지됩니다.
전체 예제 CSS에는 .clipped-shape, 너비 240px, 비율 4 / 3, 배경 #ff6600, -webkit-clip-path와 clip-path가 들어 있습니다. 복사한 CSS는 다운로드한 toolars-clip-path.css(240바이트)와 같았습니다. 선언만 선택하면 정확히 clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);(UTF-8 73바이트)를 복사합니다. 실제 레이아웃에서 잘림을 확인하세요.
점 1의 X를 101%로 설정합니다. 2026-09-24 화면은 좌표가 유한하고 0~100%여야 한다고 알렸고, 미리보기와 CSS가 사라지며 복사·다운로드가 비활성화됐습니다. X를 30%로 되돌리면 polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%)이 복구됩니다. 교차하는 변은 자동 수정되지 않습니다.
네 가지 프리셋에서 꼭짓점을 추가, 삭제, 이동하고 clip-path 선언 또는 전체 예제 CSS를 내보내세요. 백분율 좌표는 요소 크기에 따라 조절됩니다. 선언을 기존 규칙에 붙여 넣거나 .clipped-shape 클래스를 사용하고 데스크톱과 모바일에서 확인하세요.
자주 묻는 질문