01
安全地换预设
选三角形、星形或箭头时会先显示替换预览和顶点数量，应用后仍可撤销，不会直接抹掉自定义多边形。
HTML / CSS 工具
CSS clip-path 生成器拖点、预览、导出
拖动顶点或调整基本形状参数，预览裁剪边界并取得对应的 CSS 声明。
CSS clip-path 生成器
形状预览
CSS 结果
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);形状坐标和 CSS 只在浏览器本地生成。
CSS 已就绪，可以复制。
做徽章、异形图片或斜切区块时，手写 polygon 坐标很难一眼看出最终边界。CSS clip-path 生成器让你直接拖动顶点，再用数值微调位置。
这个 CSS clip-path 生成器还提供 circle、ellipse 和 inset 的独立参数。预览与代码同步，但导出前会检查结果是否已随当前形状更新。
为什么用 CSS clip-path 生成器
每次修改都能在本地看到实际裁剪轮廓。
拖点与数值一起编辑
在预览上拖动顶点，边缘会立即变化；选中顶点后还可以精确输入 X、Y。需要 polygon 多边形裁剪时，不必反复猜坐标。
单位切换不改变形状
同一个多边形可导出百分比或按 320 × 320 参考盒换算的像素坐标。进行 clip-path 可视化编辑时，切换单位不会让预览突然变形。
先预览替换，再导出代码
02
看懂两种坐标
点边缘的小圆点可在该边中间插点；选中顶点后可改 X、Y。百分比适合响应式元素，像素值固定参考 320 px 盒子。
03
确认结果没有过期
自动生成会在停止编辑后更新；关闭后可按 Ctrl/Cmd + Enter 手动生成。当前形状一变，复制和下载会暂时禁用。
形状编辑与 CSS 导出
四种基本形状
多边形、圆形、椭圆和内缩矩形各有对应控件，不把圆弧硬塞进多边形折线。
顶点可增删可微调
从边缘插入顶点、拖动位置或输入数值；删除前会预览，并始终保留至少 3 个顶点。
预设可撤销
三角形、菱形、六边形、星形和箭头可快速起步，覆盖已有形状前先确认。
复制或下载声明
这款 CSS 裁剪路径生成器输出标准 clip-path 声明，可直接复制或保存为 CSS 文件。
坐标和裁剪的实际边界
- 像素坐标有固定基准
- 像素模式按 320 × 320 px 参考盒换算；目标元素尺寸变了，像素形状不会同比缩放。需要响应式轮廓请用百分比，不支持单点混用单位。
- 不解析任意 CSS
- CSS 剪切路径生成器只输出四种基本形状，不载入已有的 path()、shape()、SVG 引用或混合单位代码；结果区是只读的。
- 裁剪不改变布局盒
- clip-path 只改变可见绘制区域，元素原本占据的空间仍在；元素自身的 box-shadow 也可能被一同裁掉。
- 只导出 CSS
- 不上传图片、不生成 PNG 或 SVG，也不制作 hover 动画；多边形动画还要求前后顶点数量一致。
CSS clip-path 生成器常见问题
为什么编辑器载入不了我的 clip-path？
本页不载入现有 CSS。任意 calc()、path() 或 SVG 引用不能保证无损还原成这里的控制点；请从预设新建形状并导出。
可以在两个 clip-path 形状之间做动画吗？
工具只生成一个静态形状，不输出动画。多边形之间做过渡时，两端顶点数通常需要一致，否则会跳变。
clip-path 裁剪会改变元素占据的空间吗？
不会。裁剪改变的是绘制和命中区域，不重新计算布局尺寸；被裁掉的地方不会作为可见形状使用。
为什么元素被裁掉的部分仍能被点击？
按正常的 clip-path 命中测试，被裁掉的区域通常不应响应指针。如果仍能点击，检查是否是外层元素、伪元素或未裁剪的子层在接收事件。
clip-path 的坐标应该用百分比还是像素？
需要随元素伸缩就选百分比；像素坐标以标注的 320 × 320 px 盒子为基准，放到不同尺寸的元素上不会保持相同比例。
发现形状或坐标处理有问题？
现在使用 CSS clip-path 生成器
先选一个预设，再拖动顶点，观察裁剪轮廓和代码的对应关系。
下次需要 CSS clip-path 生成器时，可直接回来编辑多边形、圆形或内缩矩形。
本地生成，无需上传。