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

> 免费在线 CSS clip-path 生成器：拖动顶点编辑多边形，支持圆形、椭圆、带圆角的 inset，25 个预设（三角形、箭头、五角星、对话气泡等），在图片上实时预览并复制 CSS。

- 网址: https://qilingtools.com/zh/css-clip-path
- 分类: 开发工具 (https://qilingtools.com/zh/dev)
- 标签: [设计配色](https://qilingtools.com/zh/tags/design), [开发](https://qilingtools.com/zh/tags/dev), [前端网页](https://qilingtools.com/zh/tags/frontend)
- 最后更新: 2026-10-26
- 价格: 免费，无需注册
- 隐私: 在浏览器本地处理，文件不上传服务器

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

## 使用步骤

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

## 功能特点

- 多边形、圆形、椭圆、inset 四种形状
- 在图片上直接拖动编辑，双击加点、右键删点、方向键微调
- 25 个预设：箭头、五角星、对话气泡、相框等
- 一键生成任意边数的正多边形和星形
- 上传图片预览，半透明显示被裁区域
- 百分比或像素单位，可选 -webkit- 前缀
- 粘贴已有 polygon() 导入继续编辑
- 吸附网格与顶点坐标精确输入

## 常见问题

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

百分比相对于元素自身的宽高，元素尺寸变化时形状会跟着缩放，适合响应式布局，一般推荐使用；像素是固定大小，适合尺寸固定的图标或按钮。选择像素时，工具会按你填写的参考宽高把百分比换算成 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 的顶点数相同。

## 相关工具

- [JSON 格式化](https://qilingtools.com/zh/json): 免费在线 JSON 格式化：一键美化、压缩，实时语法校验并定位到出错行列，支持树形视图折叠、键名排序、转义与去转义、Unicode 转中文、复制下载，数据不上传。
- [Base64 编解码](https://qilingtools.com/zh/base64): 免费在线 Base64 编码解码工具：支持中文 UTF-8、URL 安全变体，文本与 Base64 互转，实时转换，本地处理不上传。
- [URL 编解码](https://qilingtools.com/zh/url-encode): 免费在线 URL 编码解码工具：encodeURIComponent 与 encodeURI 两种模式，处理中文、空格与特殊符号，本地实时转换不上传。
- [JWT 解析](https://qilingtools.com/zh/jwt): 免费在线 JWT 解析工具：解码 JWT 的 Header 与 Payload，展示过期时间、签发时间等，本地解析不上传，保护令牌安全。
- [时间戳转换](https://qilingtools.com/zh/timestamp): 免费在线 Unix 时间戳转换工具：时间戳与日期互转，自动识别秒/毫秒，显示本地时间、UTC、ISO 8601 和相对时间，实时更新。
- [哈希计算](https://qilingtools.com/zh/hash): 免费在线哈希/摘要计算工具：对文本或文件计算 SHA-1、SHA-256、SHA-384、SHA-512，使用浏览器加密接口本地完成，文件不上传。
- [UUID 生成](https://qilingtools.com/zh/uuid): 免费在线 UUID 生成器：使用加密安全随机数批量生成符合 RFC 4122 的 UUID v4，可大写、去连字符、加花括号，一键复制。
- [进制转换](https://qilingtools.com/zh/base-convert): 免费在线进制转换工具：二进制、八进制、十进制、十六进制及任意 2–36 进制互转，支持大整数（BigInt），本地实时计算。