使用预设与自定义点位生成 clip-path 多边形,并实时预览。
为高级 UI 蒙版、英雄部分和装饰组件构建多边形和基于形状的剪辑路径值,并具有导出就绪的 CSS 和快速迭代支持。
它从基于点的编辑和形状控件创建有效的剪辑路径语法。
它无需依赖外部 SVG,即可快速制作对角线、波浪和自定义蒙版原型。
通过提供确定性坐标和快速复制输出来减少裁剪图层的调试时间。
多边形点
polygon(0 0, 100% 0, 100% 78%, 0 100%)
插入剪切
inset(6% round 12px)
圆形蒙版
circle(45% at 50% 50%)
多边形 CSS
clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
过渡规则
transition: clip-path 220ms ease;
回退说明
为禁用复杂剪辑的环境提供后台回退。
元素消失后剪辑
检查点顺序并确保多边形区域不折叠。
动画出现锯齿状
减少点数并避免突然的坐标跳跃。
内容被无意裁剪
验证剪切容器边界和响应断点。
浏览器支持遗留环境中的惊喜
为不支持的剪辑路径情况添加优雅的后备样式。
CSS Clip-Path 生成器 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
我可以对剪辑路径值进行动画处理吗?
可以,但更平滑的结果通常来自更简单的点集。
我应该更喜欢 SVG 蒙版吗?
SVG 对于非常复杂的形状可能更好; Clip-path 非常适合轻量级 CSS 工作流程。
如何保持形状响应?
使用百分比坐标,以便根据容器尺寸进行剪切缩放。
clip-path 是否适合生产 UI?
是,在目标设备上提供后备样式和性能检查。