CSS Clip-Path 생성기
「CSS Clip-Path 생성기」는 코드, 데이터 및 QR 작업을 위한 브라우저 도구입니다. 입력과 결과는 일반적으로 이 기기에서 처리되며 가입이 필요하지 않습니다.
Choosing a preset replaces the point list. Select Keep custom points before editing freely.
The preview color is not part of the copied clip-path declaration.
One point per line as X, Y percentages from 0 through 100. Use 3 to 12 points. The first and last points connect automatically.
Percentages resolve against the element’s border box. Concave polygons are allowed; self-intersecting paths and edge rendering can differ between browsers. Use a fallback shape or unclipped content when older browser support matters.
사용 방법
사용 방법
- Select a common polygon preset or keep custom points.
- Edit up to 12 X, Y percentage points and review the clipped shape as it changes.
- Copy the generated clip-path CSS and test it with your own element and browser support requirements.
Editable percentage polygons
Triangle, diamond, hexagon, and five-point star presets provide practical starting points. Choose Keep custom points to edit the list directly. Each nonempty line must contain X, Y from 0 through 100, and the focused editor accepts three through twelve points so the output stays understandable and reviewable.
Rendering and support boundaries
CSS resolves polygon percentages against the clipped element’s border box. Concave paths are valid, but self-intersecting polygons can use browser-specific fill behavior and anti-aliasing at edges can vary. CSS clip-path support is strong in current browsers but may be unavailable or limited in older browsers; keep meaningful content available without relying on the clipped outline alone.
자주 묻는 질문
더 알아보기
What box do the percentages use?
For this generated CSS polygon, percentages resolve against the element’s border box. A 50%, 50% point is the visual center of that box before clipping.
Can I make a concave or self-intersecting shape?
Concave polygons are supported. Self-intersecting paths may render differently across engines, so inspect the target browsers and prefer a simpler polygon when consistent output matters.
Does this export SVG or an image?
No. It creates a CSS clip-path declaration and a local preview only. Apply the copied CSS to an existing HTML element or use a dedicated vector tool when you need an SVG path.