CSS 裁剪路径（clip-path）生成器

创建 CSS clip-path 形状：带可拖动点和预设的多边形、圆形、椭圆，以及带圆角的 inset。实时预览并复制代码。

形状

预设

形状设置

在预览中拖动控制点，或直接输入精确数值。

显示被裁掉的区域

预览

CSS 代码

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

什么是裁剪路径生成器？

以可视化方式绘制 clip-path 形状。多边形可以通过在预览中拖动点或输入精确的百分比来编辑，预设涵盖从三角形到星形和对话气泡；圆形、椭圆和 inset 形状则用滑块设置。

如何使用裁剪路径生成器

选择“形状”：多边形、圆形、椭圆或 Inset。
对于多边形，选择预设，然后拖动手柄或输入每个点的 X/Y 百分比；可使用“添加点”/“删除点”。
对于圆形和椭圆，设置半径和中心；对于 inset，设置“上”“右”“下”“左”以及可选的“圆角半径”。
切换“显示被裁掉的区域”，查看被裁掉的部分。
复制 CSS 代码。

示例

输入

Hexagon preset with point 1 moved to X 20%

输出

clip-path: polygon(20% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

何时使用裁剪路径生成器

适合装饰性的图片形状、倾斜的区块边缘、六边形头像和揭示动画（点数相同的形状之间可以对 clip-path 做动画）。形状之外的内容会被隐藏且不会接收点击。圆角矩形请优先使用 border-radius；需要让文字环绕的形状请使用 shape-outside。

裁剪路径生成器的工作原理

坐标是相对于元素边框盒的百分比，从左上角开始度量。多边形按点的顺序写作 polygon(x% y%, …)，圆形写作 circle(r% at x% y%)，椭圆写作 ellipse(rx% ry% at x% y%)，inset 写作 inset(top right bottom left round r)，四个偏移值像 margin 简写那样缩短。“添加点”会在选中点和下一个点的中间插入一个新点。