使用方法
- 为规则输入 类名，例如 triangle，然后选择 形状。
- 选择 polygon（多边形）时，在 预览 上拖动顶点，或在输入框中填写它的 x 和 y。用 添加顶点 和 删除最后一个顶点 改变顶点数量。
- 选择 inset（内缩）、circle（圆形）或 ellipse（椭圆）时，在输入框中填写数字，预览会立即重绘。
- 将 CSS 中的规则复制到样式表中，并把该类名加到需要裁剪的元素上。
四种形状
CSS 形状模块规范（英文）定义了 clip-path 可用的基本形状。多边形是一组顶点，各顶点按您列出的顺序相连。内缩按四个距离裁剪盒子，依次为上、右、下、左。圆形或椭圆有一个或两个半径，圆心写在 at 之后。
- polygon(50% 0%, 100% 100%, 0% 100%) 有三个顶点，每个顶点都有以百分比表示的 x 和 y。
- inset(10% 20% 10% 20%) 上下各裁去10%，左右各裁去20%。
- circle(60px at 50% 50%) 的半径为60 px，圆心位于盒子的正中央。
百分比与参照盒
顶点、内缩和圆心中的百分比都是盒子的一部分，规范按参照盒的实际使用尺寸换算。CSS 遮罩模块规范（英文）规定，未给出参照盒时使用边框盒。元素位于形状之外的部分不会被绘制。
本工具不生成的内容
- 多边形的填充规则（fill rule）、内缩的 round 子句，以及 clip-path 的 url() 和 path() 写法。
- 圆形或椭圆的百分比半径。本工具读取的形状文本没有说明其换算方式，因此半径以 px 为单位。
示例：三角形
三角形是一个有三个顶点的多边形：盒子顶部居中、右下角和左下角。下表给出各个顶点。本工具写出的规则为 .triangle，其 clip-path 设为 polygon(50% 0%, 100% 100%, 0% 100%)。
| 顶点 | x | y |
|---|---|---|
| 1 | 50% | 0% |
| 2 | 100% | 100% |
| 3 | 0% | 100% |
常见问题
为什么圆形或椭圆的半径以像素为单位？
形状文本没有说明 circle() 和 ellipse() 的百分比半径如何换算，因此本工具只提供像素。像素的含义是唯一的，预览会按您屏幕上盒子的实际尺寸绘制它。
输入错误的数值时，为什么形状消失了？
本工具会用红色显示原因，并且不绘制形状，以免给出错误的规则。数值超出范围，或内缩使盒子不留任何部分，是常见的原因。
顶点的顺序重要吗？
重要。顶点按您列出的顺序写入，这个顺序决定了轮廓。移动一个顶点会改变形状，其他顶点则保持不动。
clip-path 与 border-radius 有什么不同？
clip-path 把元素裁剪为一个形状，形状之外的部分不会被绘制；border-radius 只把边角变圆。除非另外指定，clip-path 的参照盒是边框盒。
多边形最多可以有多少个顶点？
这里最少3个，最多20个。顶点越多，轮廓越精细，规则也越长；预览最多显示20个可拖动的顶点。
我生成的 CSS 会被发送到什么地方吗？
不会。预览和规则都在您的浏览器中生成，任何内容都不会被保存或发送到我们的服务器，因此离开页面前请先复制 CSS。
资料来源
数据和文字最近核对于2026年11月12日星期四。