CSS clip-path 生成器
可视化生成 CSS clip-path：多边形顶点可增删并直接改数值，还支持圆形、椭圆、inset 与 path，渐变实时预览，内置三角形、菱形、六边形、星形、箭头、消息气泡等预设。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
实时预览
预览色块使用渐变色背景，虚线框是元素原本的边界。
预设
顶点（百分比）
顶点 1
顶点 2
顶点 3
CSS
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
这个工具能做什么
- 做异形卡片、斜切 banner、六边形头像这类效果时不用手算顶点：拖动或直接改数值，右边的 CSS 实时更新。
- 星形、箭头、消息气泡这类固定形状直接用预设，改几个百分比就能微调，省去在画图软件里量坐标。
- 圆形、椭圆和 inset 也能生成：inset 可以一次写四边内缩加圆角，比手写四条 padding 更直观。
- 需要复杂路径时切到 path 模式，把设计软件导出的 SVG path 数据粘进去，工具负责拼出合法的 CSS 声明。
示例
输入
形状 polygon，顶点 50% 0%, 100% 100%, 0% 100%（内置「三角形」预设）
输出
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
顶点按百分比记录，0% 是左 / 上边、100% 是右 / 下边，和元素尺寸无关；数值四舍五入到两位小数。
常见问题
为什么删到只剩两个顶点就不让删了？
多边形至少要有 3 个顶点才能围出面积，少于 3 个浏览器会直接忽略这条 clip-path。所以删除按钮在剩下 3 个顶点时会拒绝操作，也不会生成无效的 CSS。
顶点填的数值超出 0–100 会怎样？
会被夹回 0–100 范围内，避免出现负百分比或越界的值把形状整个裁没。同时数值保留两位小数，1/3 这类结果不会带来一长串浮点尾巴。
clip-path 和 border-radius 有什么区别？
border-radius 只影响盒子的圆角，边框、阴影、点击区域还按矩形算；clip-path 是真的把可见区域裁掉，鼠标事件也会跟着裁剪后的形状走。要做圆角矩形优先用 border-radius。
path 模式里的坐标单位是什么？
path() 用的是元素本地坐标系里的像素值，参考原点在元素左上角，所以不能像 polygon 那样用百分比。缺了闭合指令 Z 或路径为空都会报错，粘之前先确认导出数据完整。
生成的 CSS 能直接用在浏览器里吗？
能，这就是标准 CSS 声明。不过旧版本浏览器（比如 IE）不支持 clip-path，需要降级时得额外加 -webkit-clip-path 前缀或干脆保留矩形外观。
关键词：clip-pathclip path裁剪多边形polygoncss 形状insetpath生成器generator