CSS Clip-Path 클리핑 경로 생성기

CSS clip-path 클리핑 경로 코드를 시각적으로 생성하며, 다각형, 원형, 타원형 등의 도형을 지원하고 이미지를 일괄 처리할 수 있습니다

버그 신고

브라우저 실행 모드: 데이터는 브라우저에서 처리되며 서버에 업로드되지 않습니다.

속도와 안정성: 처리 속도는 기기와 브라우저에 따라 달라집니다. 대량 배치 작업에는 데스크톱 버전이 더 안정적일 수 있습니다.

도구를 불러오는 중입니다. 잠시 기다려 주세요...

온라인 도구가 로드되거나 실행되지 않으면 데스크톱 도구를 사용해 보세요. https://tools.yikeaigc.com/

도구 사용량

이전 버전으로 돌아가기

먼저 자르기 경로를 설정한 뒤 코드를 복사하거나 이미지를 일괄 처리하세요

프리셋 모양을 선택한 후 다각형 제어점을 드래그할 수 있으며, 원형, 타원, inset 사각형으로 전환해 매개변수를 조정할 수도 있습니다. 일괄 처리는 현재 경로를 사용하며, 여러 이미지를 업로드하면 처음 20장만 표시되지만 실제로는 모두 처리됩니다.

현재 경로 정보

유형polygon

제어점3

팁: 먼저 경로 설정을 완료한 뒤 코드를 복사하거나 이미지를 처리하세요.

실시간 미리보기 다각형 모드에서는 파란 제어점을 드래그할 수 있으며, 좌표가 CSS로 동기 생성됩니다.

좌표: 요소 자체 기준, 왼쪽 위는 0% 0%입니다. polygon(50% 0%, 100% 100%, 0% 100%)

모양 및 프리셋 먼저 유형을 선택한 뒤 매개변수 조정

모양 유형

사전 설정 분류

경로 매개변수 값은 백분율 지원

좌표 텍스트

반지름

중심 X

중심 Y

가로 반지름

세로 반지름

중심 X

중심 Y

上

오른쪽

아래

좌

둥근 모서리

미리보기 및 출력 배경은 미리보기와 이미지 내보내기에만 적용됩니다

미리보기 너비(px)

미리보기 높이(px)

색상 A

색상 B

그라데이션 각도

이미지 미리보기

요소 경계 표시 -webkit 접두사 포함 클래스 선택자 생성

코드 생성

코드는 설정에 따라 실시간으로 업데이트됩니다.

현재 경로 일괄 적용 먼저 이전 단계에서 경로를 설정한 후 이미지 처리를 선택하세요.

클릭하거나 이미지를 드래그하세요 JPG, PNG, WebP, GIF, BMP 등 일반 형식 지원

아직 이미지를 선택하지 않았습니다.

출력 설정 PNG는 투명 배경 지원

출력 형식

크기 모드

긴 변 제한(px)

사용자 지정 너비(px)

사용자 지정 높이(px)

출력 품질92%

자르기 외부 투명 현재 경로 사용

처리 대기 중.

이미지 미리보기 및 결과 업로드 후 처음 20장만 표시되며, 처리 시 전체 파일이 포함됩니다.

처리할 이미지0장

이미지를 선택하면 썸네일이 표시됩니다.

처리 결과0장

처리 완료 후 결과 썸네일이 표시됩니다.

안내

소프트웨어 사용 설명

클리핑 경로 디자인: 도구에 들어간 후 먼저 “경로 디자인” 단계에서 도형 유형을 선택합니다. 다각형, 원형, 타원형 또는 내부 삽입 사각형을 사용할 수 있습니다.
프리셋 도형 선택: 기본 도형, 화살표 및 표시, 장식 도형 중에서 프리셋을 선택한 뒤 필요에 따라 매개변수를 조정할 수 있습니다.
경로 매개변수 편집: 다각형은 제어점을 드래그하거나 좌표 텍스트 상자에 백분율 좌표를 입력할 수 있습니다. 원형, 타원형 및 내부 삽입 사각형은 반지름, 중심점, 여백 및 둥근 모서리를 직접 입력할 수 있습니다.
미리보기 효과 설정: 미리보기의 너비와 높이, 그라데이션 색상, 그라데이션 각도를 조정할 수 있으며, 이미지를 미리보기 콘텐츠로 선택할 수도 있습니다.
CSS 코드 복사: 효과를 확인한 후 “clip-path 복사” 또는 “CSS 복사”를 클릭합니다. -webkit 접두사와 클래스 선택자를 포함할지 선택할 수 있습니다.
이미지 일괄 처리: “다음 단계: 일괄 처리”를 클릭하고 여러 이미지를 선택한 뒤 출력 형식, 품질 및 크기 모드를 설정하여 처리를 시작합니다.
결과 다운로드: 처리가 완료되면 “모든 결과 ZIP 다운로드”를 클릭합니다. 출력 파일은 가능한 한 원본 파일명을 유지하며, 이름이 중복되면 숫자를 자동으로 추가해 구분합니다.