可视化 CSS clip-path 生成器：polygon / circle / ellipse / inset，可拖拽控点。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
拖动预览上的圆点来改形状。 点击预览空白处加顶点（多边形模式）。
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
这个工具能做什么
一个所见即所得的 CSS `clip-path` 可视化编辑器，直接在预览上拖动控制点 来定义多边形、圆形、椭圆、矩形内陷裁剪，生成的 `clip-path:` 声明会随着 每一次拖动实时更新。一个 tab 切换四种形状：polygon（可加/减顶点，每个 顶点都能拖到任意百分比位置）、circle（拖中心点 + 半径手柄）、ellipse （独立的 rx / ry 手柄）、inset（四条边的内陷值 + 可选圆角）。预览面板 是一个真实的 DOM 元素，挂的就是你输出区那段 CSS，拖出来的形状跟生产 环境里一模一样，不存在"预览归预览、上线归上线"的偏差。内置 9 个高 品质预设覆盖日常会用到的所有形状：三角形、五边形、六边形、五角星、 六角星、八角星、雪佛龙箭头、长箭头、切角卡片、消息气泡。一键复制 即可粘贴的 CSS 声明，塞进样式表、Tailwind 任意值 `[clip-path:polygon(...)]`、或 React 内联 style 都能跑。100% 浏览器 本地运算，没有任何数据上传。适合：把图片裁成非矩形形状、做有装饰 感的分段分隔、给 hero banner 加蒙版、不打开 Figma 就能设计徽章/丝带。
工具细节
- 输入
- 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 22 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS clip-path 生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
把团队头像裁成六边形放到「关于我们」页
设计稿用的是六边形头像，但拿到的照片全是方形 JPG。与其每张都 进 PS 抠图，不如把图片设成 200x200，套六边形预设，再把顶部顶点 拖到 0%、底部拖到 100% 让尖角贴边。一行 `clip-path:polygon()` 就管住全部 8 个成员，以后换照片也不会破形，因为形状写在 CSS 里 而不是图片文件里。
在两块背景色之间做一道斜切分隔
落地页常常要从深色 hero 斜切进浅色区块。用 inset 模式把顶部内陷 设 0%，拖一下左下角；或者切到 4 顶点多边形，比如 `0 0, 100% 0, 100% 92%, 0 100%`，做出 1 到 2 度的斜面。复制到 下方区块的外层容器上就行。不用 SVG、不加多余 DOM，而且四个点 都是百分比，从 1440px 一路缩到 375px 手机都能干净自适应。
给「促销」标签做一个带缺口的丝带徽章
价格卡要挂一条写着「立减 30%」的丝带，尾部带 V 形缺口。从 chevron 预设起手，在右边那条边上加两个顶点，把中间那个往里拖到 85% 左右就刻出缺口。生成的 7 顶点多边形直接塞进你的 `.ribbon` 类。因为它是真实 DOM 元素，文字、内边距、box-shadow 全都保留， 换成 SVG path 这些就得重做一遍。
用 inset 动画在 hover 时把图片擦入
想让卡片图片在悬停时从左往右擦入。生成两个 inset 值：收起态 `inset(0 100% 0 0)`、展开态 `inset(0 0 0 0)`，再在两者之间做过渡。 工具会把这两个关键帧的精确写法都给你。inset 的四条边各自独立 渐变，所以一句 250ms 的 `transition: clip-path` 就能做出顺滑的 左到右揭示，不用写 JS，也不用叠遮罩层。
常见踩坑
忘了给老 iOS（≤13）加 `-webkit-clip-path`。如果某个 Safari 用户反馈本该是五角星的地方显示成方块，就把 `-webkit-clip-path` 和 `clip-path` 两条声明都输出。
想在顶点数不同的两个形状之间做补间。3 顶点三角形不会变成 6 顶点六边形；把两个关键帧改成相同顶点数，需要时把多余的点叠在一起。
把 `box-shadow` 直接加在被裁剪的元素上。clip-path 会连阴影一起裁掉，阴影就没了；把阴影挪到父容器，或改用 `filter: drop-shadow()`。
隐私说明
所有运算都在你的浏览器里完成。你拖出来的形状、选的预设、生成的 `clip-path` 字符串都不会发到任何服务器。当前形状会编码进页面 URL， 方便你分享或收藏某个设计，也就是说你把链接发给别人时，几何参数会 跟在那条链接里，但你拿来预览的图片始终不会上传。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。