百分比和像素单位怎么选？

百分比相对于元素自身的宽高，元素尺寸变化时形状会跟着缩放，适合响应式布局，一般推荐使用；像素是固定大小，适合尺寸固定的图标或按钮。选择像素时，工具会按你填写的参考宽高把百分比换算成 px。圆形的百分比半径是相对于宽高对角线 ÷ √2 计算的，宽高相等时就是边长的百分比。

还需要加 -webkit-clip-path 吗？

现在的 Chrome、Edge、Firefox 和 Safari 都支持不带前缀的 clip-path 基本形状。只有需要兼容 Safari 13.1 之前的旧版本时才需要 -webkit- 前缀，工具默认同时输出两行，写在前面的前缀版本不会影响新浏览器。

被裁掉的部分还能点击吗？会影响布局吗？

clip-path 只改变元素的可见区域和点击区域：被裁掉的部分不显示，也不会响应鼠标点击和悬停，但元素在布局中占用的空间不变，周围的元素不会移动。如果希望文字沿着形状排布，需要另外使用 shape-outside。

可以给 clip-path 加边框或阴影吗？

不能直接加：border 和 box-shadow 会被一起裁掉。常见做法是在外层套一个同样 clip-path 的元素作为背景色，内层用稍小的 inset 形成边框效果；阴影可以在父元素上使用 filter: drop-shadow()，它会沿着裁剪后的形状投影。clip-path 也可以配合 transition 做形状变换动画，前提是前后两个 polygon 的顶点数相同。

🔶

🔶CSS clip-path 生成器 - 可视化拖动多边形、圆形与内缩裁剪

clip-path 可以把任何元素裁成多边形、圆形、椭圆或圆角矩形，用来做斜切的横幅、六边形头像、箭头按钮、对话气泡和各种异形图片，而且不需要额外的图片或 SVG。在这里直接在图片上拖动顶点就能编辑形状：双击边缘附近可以插入新顶点，右键或 Alt+点击删除顶点，选中后用方向键微调，还可以吸附到 5% 网格。圆形和椭圆可以拖动中心和半径手柄，inset 可以拖动四条边并设置圆角。内置三角形、梯形、平行四边形、菱形、五边形到十边形、斜角、缺角、五角星、左右箭头、V 形、十字、叉号、对话气泡、相框、标签、丝带等 25 个预设，也能按边数一键生成正多边形或星形。预览可以换成你自己上传的图片，并以半透明显示被裁掉的部分。生成的 CSS 可选百分比或像素单位（按你设置的参考尺寸换算），可同时输出 -webkit-clip-path 前缀以兼容旧版 Safari。还支持粘贴已有的 polygon(...) 继续编辑。

免费 · 无需注册 · 浏览器本地处理最后更新：2026-10-26

正在加载工具...

如何使用CSS clip-path 生成器

1选择形状类型或点击一个预设，也可以上传自己的图片预览
2在图片上拖动顶点或手柄调整形状，双击边缘加点、右键删点
3选择百分比或像素单位以及是否加 -webkit- 前缀，复制生成的 CSS

常见问题

百分比和像素单位怎么选？: 百分比相对于元素自身的宽高，元素尺寸变化时形状会跟着缩放，适合响应式布局，一般推荐使用；像素是固定大小，适合尺寸固定的图标或按钮。选择像素时，工具会按你填写的参考宽高把百分比换算成 px。圆形的百分比半径是相对于宽高对角线 ÷ √2 计算的，宽高相等时就是边长的百分比。
还需要加 -webkit-clip-path 吗？: 现在的 Chrome、Edge、Firefox 和 Safari 都支持不带前缀的 clip-path 基本形状。只有需要兼容 Safari 13.1 之前的旧版本时才需要 -webkit- 前缀，工具默认同时输出两行，写在前面的前缀版本不会影响新浏览器。
被裁掉的部分还能点击吗？会影响布局吗？: clip-path 只改变元素的可见区域和点击区域：被裁掉的部分不显示，也不会响应鼠标点击和悬停，但元素在布局中占用的空间不变，周围的元素不会移动。如果希望文字沿着形状排布，需要另外使用 shape-outside。
可以给 clip-path 加边框或阴影吗？: 不能直接加：border 和 box-shadow 会被一起裁掉。常见做法是在外层套一个同样 clip-path 的元素作为背景色，内层用稍小的 inset 形成边框效果；阴影可以在父元素上使用 filter: drop-shadow()，它会沿着裁剪后的形状投影。clip-path 也可以配合 transition 做形状变换动画，前提是前后两个 polygon 的顶点数相同。