CSS 클립 경로 생성기

강조점을 드래그하여 CSS 클립 방향 모양을 만들거나 미리 설치를 선택하면 polygon CSS를 복사합니다.

How to use Clip Path Generator

1. 포인트를로드하기 위해 미리 설정된 모양을 클릭하거나, 설정, 원형 또는 둥근 클립을 선택.
2. 미리보기에 포인트를 드래그하여 다각형을 다시 형성하거나 원형과 인셋 모드에 대한 슬라이더를 조정할 수 있습니다.
3. 전체 요소를 미리 볼 수 있도록 'Show clipped-away area'를 토글하고 클립-path 규칙을 잡아 복사 CSS를 클릭합니다.

클리프 패스 생성기은 무엇입니까?

FAQ

CSS 클립 경로 속성은 무엇입니까?

clip-path는 볼 수있는 요소의 영역을 정의합니다. 지역 이외의 모든 것은 차단됩니다. 그것은 다각형 (), 원형 (), ellipse (), 및 inset ()와 같은 기본 모양을 지원하고, 이미지 없이 비 직사각형 모양으로 자르기.

나는 손으로 다각형 점을 편집 할 수 있습니까?

예. 어떤 다각형 preset 선택 후, vertices는 미리보기에 드래그할 수 있는 손잡이로 나타납니다. 다각형과 백분율 좌표가 생성 된 CSS에서 라이브를 재구성합니다.

모든 브라우저에서 지원되는 clip-path는?

Chrome, Edge, Firefox 및 Safari의 현대 버전은 기본 모양으로 모든 지원 클립 경로입니다. 이전 브라우저의 경우 -webkit- prefix 또는 fallback이 필요할 수 있습니다. 지원되지 않은 브라우저가 규칙을 무시하고 전체 요소를 보여줍니다.

Related tools

• Cubic Bezier Generator
• CSS Gradient Generator
• Box Shadow Generator
• Color Palette Generator