clip-path 生成器

这款 CSS clip-path 生成器让你用可视化的方式设计 clip-path 图形，无需手动书写一对对坐标。在交互式画布上拖动锚点，实时观察图形变化，再把生成的 CSS 直接复制到你的样式表里。

它支持全部四种 clip-path 图形函数——多边形（polygon）、圆形（circle）、椭圆（ellipse）和内缩矩形（inset）——并内置了 28 个现成预设。无论你是切割非矩形界面的前端开发者、设计 Banner 区块与图片蒙版的网页设计师，还是想搞懂 clip-path 数值究竟如何运作的人，它都派得上用场。

隐私优先设计：每一个图形和 CSS 值都在你的浏览器中生成。任何内容——包括你为预览图形而载入的背景图片——都绝不会上传到服务器。

如何使用 clip-path 生成器

选择图形类型

选一个标签页——多边形、圆形、椭圆或内缩——或打开预设，从星形、箭头、盾形等现成图形起步。

编辑图形

在画布上拖动锚点来改变形状。对于多边形，点击边线可添加锚点，双击锚点可将其移除。对于圆形、椭圆和内缩，可拖动中心点、半径或边线手柄，也可用滑块输入精确数值。

使用画布辅助工具

切换外部以暗显被裁剪掉的区域，开启网格便于对齐，或更换画布颜色、上传图片，在真实内容上预览图形效果。

复制 CSS

生成的 clip-path 值会显示在输出面板里。点击复制 CSS，再粘贴到你的样式表中。已经有现成的值了？用导入粘贴已有的 CSS，继续可视化编辑。

功能特性

可视化交互式编辑器

在 4:3 画布上拖动锚点，CSS 即时更新，采用百分比坐标实现精准定位。

四种图形类型

构建多边形、圆形、椭圆和内缩 clip-path——涵盖 CSS clip-path 属性支持的每一种图形函数。

内缩带圆角

从每条边向内裁剪，并添加圆角半径，让内缩矩形的四角变圆。

内置 28 个预设

从三角形、正多边形、星形、箭头与尖角、对话气泡、盾形以及圆形/椭圆/内缩的多种变体起步。

锚点精确编辑

通过锚点列表为每个多边形锚点输入精确的 X/Y 值，精度达 0.1%，输出整洁易读。

智能锚点管理

点击边线即可在最近的两个顶点之间插入锚点，双击或按删除键即可移除——但永不会低于 3 个锚点的下限。

内缩锁定

开启全部锁定，即可一次改变内缩的四条边，实现从每条边均匀裁剪。

撤销 / 重做历史

每一处改动都会记录进最多 50 步的历史栈，让你自由地前进与后退。

导入已有 CSS

粘贴多边形、圆形、椭圆或内缩的值，载入编辑器后继续可视化打磨。

自定义背景

更换画布颜色或上传图片，预览 clip-path 在你真实内容上的呈现效果。

网格与外部叠加层

显示 10×10 的百分比网格便于对齐，并暗显外部区域，精确看清哪些部分会被裁掉。

键盘快捷键

用 Ctrl+Z / Ctrl+Y 撤销和重做，用方向键微调选中的锚点（1%，按住 Shift 为 5%），用 Delete 键删除。

常见问题

CSS 中的 clip-path 是什么？

CSS clip-path 属性为元素定义一块裁剪区域。只有图形内部的部分保持可见，外部的一切都会被隐藏。它常用于非矩形布局、图片蒙版以及装饰性界面元素。

clip-path polygon 是怎么运作的？

polygon() 值是一组由直线边连接的 X/Y 坐标对，例如三角形写作 polygon(50% 0%, 100% 100%, 0% 100%)。每个锚点都是元素宽度和高度的百分比。在本工具中你拖动锚点而无需手敲坐标对，生成器会替你写好多边形的值。

如何添加或移除多边形锚点？

在画布上靠近某条边线处点击，即可在最近的两个顶点之间插入一个新锚点。要移除锚点，可双击其手柄、选中后按 Delete 或 Backspace，或使用锚点列表中的移除按钮。多边形始终至少保留 3 个锚点，因此到达下限后删除控件会被禁用。

clip-path 能做出圆角吗？

可以，用内缩图形即可。inset() 中的 round 关键字会为裁剪后的矩形添加圆角——例如 inset(10% round 20%) 表示从每条边裁剪 10%，并把四角圆化 20%。在内缩标签页调整圆角半径控件即可设置。

圆形和椭圆有什么区别？

圆形只有一个半径，永远是完美的正圆。椭圆有两个独立的半径——一个水平（X）、一个垂直（Y）——因此你可以做出比正圆更宽或更高的椭圆形状。

我可以导入已有的 clip-path CSS 吗？

可以。点击 CSS 输出下方的导入，粘贴你的值（带或不带 clip-path: 前缀均可），再应用即可。解析器支持全部四种图形类型——多边形、圆形、椭圆和内缩——并会把图形载入编辑器以便进一步调整。

所有浏览器都支持 clip-path 吗？

这里用到的基本图形——多边形、圆形、椭圆和内缩——在所有当前版本的 Chrome、Firefox、Safari 和 Edge 中都受支持。对于非常旧的浏览器，请提供回退方案或 polyfill。

我的图形会在不同会话之间保存吗？

不会。图形不会跨页面加载保留，所以离开前请先复制 CSS。你可以自行保存这个值，随时用导入功能把它取回来。

我的数据会被发送到服务器吗？

不会。所有图形编辑和 CSS 生成都完全在你的浏览器中进行。没有任何数据会被上传或传输，包括你为预览图形而载入的任何背景图片。