CSS裁剪路径生成器
在浏览器内用三角形、菱形、六边形和五角星预设或3–12个自定义百分比坐标生成CSS polygon() clip-path，提供实时预览、复制和重置。
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.