CSS clip-path 裁剪生成器
像在手作裁剪垫上一样直接拖拽顶点得到 polygon 百分比坐标；一键套用三角、菱形、星形、箭头、标签、斜切角等预设，支持 circle 与 inset 圆角模式，实时输出带 -webkit-clip-path 前缀的 CSS，复制即用。
裁剪工作台
预设：
—
CSS 输出
直接粘贴到样式表；对图片、视频或任意 div 生效，配合 transition 可做裁剪动画。
clip-path: polygon(50% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
扩展形状库 · 顶点诊断 · 多格式导出
10 个新预设一键套用，粘贴现有 clip-path 可反向导入；顶点图标注序号、面积与自交，导出 CSS / SCSS / Tailwind / React。
扩展预设（10 个，均不超过 16 顶点）
粘贴现有 clip-path 反向导入
导出格式
/* 生成后在此预览 CSS / SCSS / Tailwind / React */
顶点分布与自交检查（编号按录入顺序）
—
当前不是 polygon 模式：切换后显示顶点编号、面积与自交检测。
方案管理 · 数值对比 · 导出
调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。
还没有留言，来抢沙发吧！