CSS 클립패스 생성기

CSS Clip-Path 생성자는 CSS clip-path 속성을 만들고 테스트하기 위한 시각적 도구입니다. Clip-path를 사용하면 요소를 기본 도형(원, 타원, 다각형) 또는 SVG 경로로 자를 수 있습니다. 이 도구는 실시간 미리보기와 코드 생성을 제공하여 웹 프로젝트를 위한 사용자 정의 모양을 디자인하는 데 도움이 됩니다.

프리셋 패널에서 프리셋 도형 버튼을 클릭하면 즉시 적용됩니다. 도구에는 12개의 내장 도형이 포함되어 있습니다: 삼각형, 사다리꼴, 평행사변형, 오각형, 육각형, 칠각형, 팔각형, 별, 원, 타원, 인셋 프레임, 둥근 인셋. 미리보기는 즉시 업데이트되어 도형이 요소를 어떻게 자르는지 표시합니다.

사용자 정의 경로 입력 필드에 유효한 clip-path 값을 입력합니다. 모든 clip-path 함수를 지원합니다: polygon(), circle(), ellipse(), inset(), path(). 도구는 최대 브라우저 호환성을 위해 표준 및 -webkit- 접두사가 포함된 CSS 코드를 표시합니다. 복사 버튼을 클릭하여 코드를 클립보드에 복사합니다.

다각형 빌더는 사용자 정의 다각형 모양을 만들기 위한 시각적 인터페이스를 제공합니다. 각 점은 X 및 Y 좌표(0-100%)로 정의됩니다. 복잡한 다각형을 만들려면 점을 추가(최소 3개)하거나 단순화하기 위해 점을 제거합니다. 좌표를 조정하면 빌더가 자동으로 유효한 CSS polygon() 구문을 생성합니다.

크기 슬라이더(100-400px)를 조정하고 색상 선택기를 사용하여 요소 배경색을 변경하여 미리보기를 사용자 정의합니다. 이러한 조정은 디자인에서 다양한 요소 크기와 색상으로 clip-path가 어떻게 표시되는지 시각화하는 데 도움이 됩니다.

CSS clip-path는 모든 최신 브라우저에서 지원됩니다. 도구는 Safari 호환성을 위해 -webkit-clip-path를 자동으로 포함합니다. path() 함수를 사용하는 clip-path는 이전 브라우저에서 지원이 제한적임에 유의하세요. 프로덕션에 배포하기 전에 대상 브라우저를 테스트하세요.