CSS Clip-Path Generator
Generate CSS clip-path shapes visually.
.element {
clip-path: circle(40% at 50% 50%);
}이 도구 소개
CSS 클립 경로 생성기는 네 가지 모양 유형에 대한 clip-path 값을 생성합니다: circle(), ellipse(), inset(), polygon(). clip-path는 요소의 표시 영역을 정의하며 모양 바깥은 숨겨집니다.
SVG 파일 없이도 창의적인 레이아웃, 이미지 마스크, 히어로 섹션 모양을 만들 수 있습니다. 모든 매개변수는 실시간으로 미리보기를 업데이트합니다.
사용 방법
- 모양 유형(circle, ellipse, inset, polygon)을 선택합니다.
- 슬라이더를 조정하여 모양 매개변수를 설정합니다.
- 다각형의 경우 목록에서 프리셋 모양을 선택합니다.
- 설정을 조정하면 실시간 미리보기가 업데이트됩니다.
- 복사를 클릭하여 CSS를 클립보드에 복사합니다.
활용 사례
히어로 섹션에서 시각적 구분자로 대각선 또는 곡선 클립 경로를 사용합니다. 프로필 이미지에 circle()을 사용합니다. 버튼 호버 효과에 clip-path 애니메이션을 활용합니다.
자주 묻는 질문
- clip-path가 클릭 영역에 영향을 미치나요? — 네. 잘린 영역은 클릭할 수 없습니다. 인터랙티브 요소에 적용할 때 주의하세요.
- clip-path를 애니메이션으로 만들 수 있나요? — 네. 같은 수의 점을 가진 두 다각형 모양 사이에서 전환 및 애니메이션이 가능합니다.
- 모든 브라우저에서 clip-path를 지원하나요? — 네, 모든 최신 브라우저에서 완전 지원됩니다.