电商主图裁边
运营小张要上架一批新款的方形抱枕，平台要求主图必须为 1:1 正方形，但摄影师拍的原片是长方形，直接拉伸会变形。她先用本工具画一个精确的圆形裁剪路径，把抱枕主体圈在圆内，再导出透明底的 PNG 叠加到 1:1 画布上。圆形的平滑边缘比手动抠图更自然，且无需打开 Photoshop，浏览器里 30 秒完成。
参 数Polygon Vertices
顶点数 vertices
4
规整 regularize
半径 radius %
50%
圆心 X cx %
50%
圆心 Y cy %
50%
横半径 rx %
40%
纵半径 ry %
30%
圆心 X cx %
50%
圆心 Y cy %
50%
上 top %
15%
右 right %
20%
下 bottom %
15%
左 left %
20%
圆角 round px
0px
预 设Shape Gallery · 一键套用
底 图Backdrop · 可上传
上传本地图片或循环内置占位图案；图片仅在浏览器本地预览，不上传服务器。
polygon()
多边形：拖动顶点改形 · 点击边线添加顶点 · 双击 / 右键删除顶点（≥3）
圆 / 椭圆：拖中心移动、拖红点改半径 · 内缩：用左侧滑杆
就绪 · 拖拽顶点实时生成 clip-path · 全程浏览器本地处理
第一节
关于本工具
About在 CSS 里裁出一个异形头像或渐变背景的几何遮罩，手写 clip-path 的 polygon 坐标往往要反复试错。这个工具把多边形、圆、椭圆和 SVG path 的坐标生成变成可视化操作——调滑块或拖拽锚点，代码实时同步。所有计算都在浏览器本地完成，不会把图片或路径数据发到服务器。适合前端开发者在设计稿落地前快速验证遮罩效果，也适合设计师导出可直接粘贴的 CSS 代码。
使用场景
PPT 图表加遮罩
产品经理老王在周报里放了一张柱状图，老板要求只展示上半年的数据，但原始图表已经包含了全年。他不想重做数据源，用本工具在图表上方叠一个矩形裁剪路径，路径高度精确对齐到 6 月那条线，下半年的柱子被裁掉，图表看起来就像只画了上半年。整个过程不破坏原文件，改回全年只需移除路径。
公众号封面切圆角
自媒体编辑小李收到一张活动合影，要作为推文封面图。公众号封面推荐 2.35:1 比例，但合影里人物太分散，直接裁成横条会切掉人脸。她用本工具画一个椭圆路径，把所有人脸框在椭圆内，然后导出为透明底的 PNG，再放到 2.35:1 的背景上。椭圆遮罩让边缘过渡柔和，比硬矩形裁剪更显专业。
产品详情页做异形标签
家具电商设计师阿强要给沙发详情页加一个「限时 8 折」的促销标签，老板要求标签不能是普通矩形，要像撕下来的纸片一样有锯齿边。他用本工具导入一段 SVG path 数据（锯齿形折线），生成一个不规则的裁剪路径，把红色的促销底图裁成锯齿形状，再叠到沙发图上。SVG path 的每个拐点都可微调，最终标签与沙发风格完全匹配。
证件照换背景抠图
应届生小刘要提交一张白底的简历照片，但手头只有蓝底证件照。他用本工具画一个椭圆路径，把头部和肩膀精确框在椭圆内，然后对路径外的蓝色区域执行「删除」操作，保留透明背景。最后在透明层下方垫一个纯白色矩形，蓝底瞬间变成白底。椭圆路径比手动套索更对称，且头发丝边缘的锯齿更少。
第二节
使用指南
Getting Started使用步骤
- 1在「形状」下拉菜单选择多边形、圆、椭圆或 SVG Path，画布预览区同步显示对应轮廓
- 2拖拽路径上的控制点调整形状，右侧代码框实时更新 clip-path 属性值
- 3在「参数微调」面板输入精确数值（如圆半径、多边形顶点坐标），画布与代码同步刷新
- 4点击「复制代码」按钮将当前 clip-path 声明复制到剪贴板，按钮显示「已复制」反馈
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) | 菱形（旋转45度的正方形） | 常规：典型对称多边形，验证百分比坐标系统正确性 |
| circle(50% at 50% 50%) | 正圆（圆心在中心，半径为容器宽高较小值的50%） | 常规：最常用的圆形裁剪，验证 at 定位语法 |
| ellipse(25% 40% at 30% 60%) | 椭圆（水平半径25%，垂直半径40%，圆心偏移至30% 60%） | 常规：椭圆双半径独立设置，验证非对称形状 |
| polygon(0 0, 100% 0, 100% 100%, 0 100%) | 完整矩形（不裁剪任何内容） | 边界：四个角点覆盖整个容器，等价于无裁剪效果 |
| circle(0% at 50% 50%) | 完全不可见（裁剪区域为零面积） | 边界：半径为零的圆，验证极端值导致空白输出 |
| polygon(50% 0%, 0% 100%, 100% 100%) | 三角形（顶点在上中，底边两端点在下左右） | 易错：三点多边形，用户常误以为必须四角点才能形成闭合 |
| path('M 10 10 L 90 10 L 90 90 L 10 90 Z') | 正方形（路径从左上角顺时针绘制闭合） | 易错：path 语法需引号包裹，且坐标单位默认为像素，与百分比混用时需注意 |
| polygon(50% 0%, 50% 100%, 100% 50%, 0% 50%) | X形交叉（四个点形成两条交叉线，无填充区域） | 边界：四点共线交叉，裁剪区域退化为零面积，验证非凸多边形处理 |
常见错误对照
1.SVG path 坐标忘记加空格或逗号分隔
✗ 错误
M10 20L30 40C50 60 70 80 90 100✓ 修复
M 10 20 L 30 40 C 50 60 70 80 90 100SVG path 命令字母后的坐标必须用空格或逗号分隔，否则解析器会混淆连续数字。M10 会被当作 M 和 10，但 L30 会被当作 L 和 30，而 C50 60 70 80 90 100 中缺少分隔会导致坐标错位。
2.clip-path 单位缺失，导致裁剪区域为 0
✗ 错误
polygon(50 0, 100 50, 50 100, 0 50)✓ 修复
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)clip-path 的 polygon 坐标必须带单位（px、% 等），无单位时浏览器会按 0 处理，裁剪区域消失。CSS 规范要求长度值必须显式声明单位。
3.circle 半径用百分比时，参考对象理解错误
✗ 错误
circle(50% at 50% 50%)✓ 修复
circle(50px at 50% 50%)circle 的半径百分比是相对于参考盒的宽高较小值（CSS 规范），不是元素对角线。若元素宽高比悬殊，50% 半径可能远小于预期，改用 px 或 em 更可控。
4.SVG path 中 A（弧线）参数顺序写错
✗ 错误
M 10 10 A 20 20 0 0 1 30 30✓ 修复
M 10 10 A 20 20 0 0 1 30 30弧线命令 A 的参数顺序为：rx ry x-axis-rotation large-arc-flag sweep-flag x y。large-arc-flag 和 sweep-flag 是 0/1 布尔值，若写反会导致弧线方向或大小错误。
5.polygon 坐标数量不闭合，导致裁剪形状异常
✗ 错误
polygon(0% 0%, 100% 0%, 100% 100%)✓ 修复
polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)polygon 至少需要 3 个点，且最后一个点必须与第一个点形成闭合。缺少闭合点会导致裁剪区域不封闭，浏览器会自动连接首尾，但形状可能不符合预期。
6.SVG path 中 Z 命令误加坐标，导致路径断裂
✗ 错误
M 10 10 L 50 10 L 50 50 Z 10 10✓ 修复
M 10 10 L 50 10 L 50 50 ZZ（闭合路径）命令不接受任何坐标参数，它自动将当前点连接到起点。如果后面跟了坐标，浏览器会忽略 Z 并尝试解析为其他命令，导致路径不闭合。
7.ellipse 的 rx/ry 值写反，椭圆变形
✗ 错误
ellipse(30% 50% at 50% 50%)✓ 修复
ellipse(50% 30% at 50% 50%)ellipse 参数顺序为 rx ry（水平半径 垂直半径）。写反后椭圆会在水平方向被压扁、垂直方向拉长，与预期形状完全相反。
8.SVG path 中相对命令（小写）误用为绝对坐标
✗ 错误
M 10 10 l 20 20✓ 修复
M 10 10 L 30 30小写 l 是相对命令，表示从当前点偏移 (20,20)，终点是 (30,30)。若本意是绝对坐标 (20,20)，应使用大写 L。相对/绝对混用会导致路径偏移。
第三节
工作原理
How It Works核心公式
clip-path: polygon(x1 y1, x2 y2, ..., xn yn)
变量说明
xi第 i 个顶点的 x 坐标（百分比或 px）yi第 i 个顶点的 y 坐标（百分比或 px）n顶点数量，≥3 构成多边形
示例
绘制一个三角形遮罩，三个顶点分别为左上角(0% 0%)、右上角(100% 0%)、底部中点(50% 100%)。CSS 值为 clip-path: polygon(0% 0%, 100% 0%, 50% 100%)。该多边形将元素裁剪为三角形，仅显示内部区域。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我想把一个图片裁成五角星形状，用这个工具能直接做到吗？＋
答
这个工具生成的是 CSS 的 clip-path 代码，不是图片处理软件。它输出的多边形、圆、椭圆或 SVG path 代码，需要粘贴到网页的 CSS 样式里，图片才会被裁切。如果只是想本地保存一张五角星图片，应该用 PS 或在线图片裁切工具；如果是做网页设计，把生成的代码贴到图片的 style 属性里就能生效。
问我画了一个不规则的 SVG path，粘贴进去报错说格式不对，为什么？＋
答
clip-path 属性只支持单个闭合的 SVG path，而且坐标值必须用空格或逗号隔开。常见的错误有：1）路径里包含多个 M（移动到）命令，相当于多个子路径；2）用了相对坐标（小写字母）但没写起点；3）路径没闭合（没有 Z 命令）。建议先在 SVG 编辑器里把路径简化成单条闭合路径，坐标全用绝对坐标（大写字母）再粘贴。
问生成的 clip-path 代码在 Chrome 里正常，但在某些手机上没效果，怎么回事？＋
答
clip-path 在移动端浏览器（尤其是旧版 WebView 和部分国产浏览器）兼容性不一致。常见原因：1）用了 SVG path 格式，部分浏览器只支持 polygon 或 circle 等基本形状；2）值没加 -webkit- 前缀，需同时写 clip-path 和 -webkit-clip-path；3）元素本身没有明确的宽高（比如图片未加载完成）。建议先用基本形状（如 circle 50%）测试环境是否支持，再替换复杂路径。
问这个工具生成的圆和用 border-radius: 50% 有什么区别？＋
答
border-radius: 50% 是把元素本身四个角变圆，始终以元素自身宽高为基准，裁出来的是椭圆或正圆（取决于宽高比）。clip-path: circle() 则是用几何圆去裁切，圆心和半径可以自由指定，裁切区域不依赖元素尺寸。例如一个 200x100 的矩形，border-radius: 50% 得到椭圆，clip-path: circle(50%) 得到正圆（只保留中间部分）。如果要做精确的圆形头像，推荐用 clip-path。
问为什么我设了 clip-path 后，元素周围出现了多余的空白或滚动条？＋
答
clip-path 只裁切元素的可见区域，不改变元素本身的盒模型尺寸。如果裁切后的形状比元素原始尺寸小，元素占位依然是原来的宽高，周围空白是元素原占位空间。要消除空白，需要把元素尺寸设成与裁切区域一致，或者用负 margin 把多余空间抵消。滚动条通常是父容器 overflow 没设成 hidden，给父容器加 overflow: hidden 即可。
问这个工具能生成动画过渡效果吗？比如鼠标移上去形状慢慢变？＋
答
工具只输出静态的 clip-path 属性值，不生成动画代码。但生成的 CSS 代码可以配合 CSS transition 实现形状变化动画，前提是两个状态使用相同类型的形状（比如都是 polygon 且顶点数相同）。不同形状之间（如圆变多边形）无法直接过渡，需要用 SVG 路径或借助 JavaScript 库。常见做法：写两个 class，用 transition: clip-path 0.3s 控制。
问我生成的多边形顶点坐标，怎么知道哪个点对应哪个角？＋
答
clip-path 的 polygon 坐标是按顺序依次连接的点，第一个点和最后一个点自动闭合。坐标系统以元素左上角为原点 (0,0)，右下角为 (100%, 100%)（如果使用百分比）。比如 polygon(50% 0%, 100% 100%, 0% 100%) 会从顶部中间开始，连线到右下角，再到左下角，形成一个三角形。如果想直观对应，建议先在纸上画个矩形标出各顶点百分比位置，再按顺序写坐标。
问这个工具支持输入负值的坐标吗？我想做超出元素边界的裁切。＋
答
支持。clip-path 的坐标可以使用负百分比或负像素值，裁切区域可以超出元素实际边界。例如 polygon(0% 0%, 150% 0%, 0% 150%) 会裁出一个超出右上角的三角形，超出部分不会显示（但元素占位不变）。注意：负值在旧版 Safari 上可能解析异常，建议先用 Chrome 测试，确认效果后再做兼容处理。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。