设计工具
颜色选择器
选择并提取 HEX、RGB、HSL 颜色值
设计工具
CSS 裁剪路径生成器
拖动顶点调整形状，复制 clip-path: polygon() 代码
工具面板
关于CSS 裁剪路径生成器
六个预设形状起步，拖动顶点改成任意多边形，方向键可微调坐标。输出是标准的 clip-path: polygon()，预览用的就是这份值。
- 1
生成的是 `polygon()`：顶点用**百分比坐标**（0–100，相对元素自身的宽高），所以同一份 `clip-path` 换成任何尺寸的元素都成立，不必按像素重算。
- 2
拖顶点即改形状（坐标夹在 0–100），顶点顺序就是连线顺序——顺序错了会得到自交的多边形，这也说明为什么拖动只改坐标、不改顺序。
- 3
六个预设（三角/菱形/五边形/六边形/星形/箭头）与拖动共用同一份状态：动过之后预设不再高亮，「重置」回到当前预设；坐标保留一位小数并去掉多余的 `.0`，复制出来的 CSS 更像手写。
- 1
选预设或直接拖顶点
预览框与实际元素是同一套百分比坐标，所见即所得。
- 2
看形状对不对
顶点顺序错的时候会出现自交，形状会明显不对——这时用「重置」回到预设再拖。
- 3
复制 clip-path
输出是一行 `clip-path`，贴到任何元素上即可。
本工具输出的是基本多边形。CSS 的 `polygon()` 支持可选填充规则：写成 `polygon(evenodd, …)` 时自交区域会变成空洞，复制后在 `polygon(` 后面手工加上 `evenodd,` 即可。
不影响布局：元素仍占原来的空间，裁掉的只是可见区域，周围元素不会移动。但**被裁掉的部分也不再响应鼠标事件**——命中测试同样受 `clip-path` 约束，所以别把可点的按钮裁到外面去。