Clip Path 生成器
把元素裁剪成箭头、星形、六边形或自定义多边形——在画布上拖点，复制 clip-path 代码。
拖拽顶点调整形状 · 双击画布添加顶点
如何使用 Clip Path 生成器
- 选择一个预设形状，或直接拖拽默认五边形的顶点开始创作。
- 在画布任意位置双击，即可在最近的边上插入新顶点。
- 选中顶点并点击「删除顶点」将其移除（至少保留 3 个顶点）。
- 切换到圆形、椭圆或内凹模式，使用参数化形状与圆角。
- 复制 clip-path 声明——百分比坐标让形状在任何尺寸下保持响应式。
关于本 Clip Path 生成器
CSS 的 clip-path 属性把元素裁剪为基础形状——多边形、圆形、椭圆或内凹矩形——隐藏形状之外的一切。它是构建非矩形布局的标准方式：斜切的分区线、六边形图片网格、箭头、对话气泡与星级评分，全部无需图片或 SVG。
本编辑器让您可视化地设计形状：在画布上拖拽多边形顶点、双击添加顶点，或从 15 个手工调校的预设出发。所有坐标都是百分比，形状会随元素缩放。输出包含适配旧版 Safari 的 -webkit-clip-path 前缀，以及面向 utility-first 项目的 Tailwind 任意值类名。
Clip Path 常见问题
如何添加或删除多边形顶点？
在画布任意位置双击——新顶点会插入到最近的边上。删除时先点击顶点将其选中（变为红色），再点击「删除顶点」。多边形始终至少保留 3 个顶点。
clip-path 多边形使用什么坐标系？
每个顶点都是从元素左上角开始测量的 x/y 对。本生成器使用百分比，0% 0% 为左上角，100% 100% 为右下角。百分比坐标随元素自动缩放，让形状保持响应式。
clip-path 可以做动画吗？
可以——只要起始与结束形状类型相同、顶点数量一致（针对多边形），clip-path 就可以在 CSS 中过渡动画。在本工具中设计好两种状态、保持顶点数一致，再用 transition: clip-path .3s 过渡即可。
clip-path 会影响子元素和溢出内容吗？
clip-path 会裁剪整个元素，包括其子元素、边框甚至 box-shadow——形状之外的内容都会被隐藏且无法点击。如果需要给裁剪形状加阴影，请在父元素上使用 filter 的 drop-shadow()。
clip-path 和 SVG clipPath 有什么区别？
CSS clip-path 的基础形状（多边形、圆形、椭圆、内凹）用一行代码即可覆盖大多数布局需求且支持动画；SVG clipPath 支持带曲线的复杂路径——几何设计用 CSS 形状（本工具），需要贝塞尔曲线时再用 SVG。