CSS 剪裁路径生成器
生成 CSS clip-path 声明 — 圆形、椭圆形、inset 或多边形形状（三角形、六边形、星形、箭头等）具有手动可编辑的自定义点列表 — 包含剪裁形状的实时预览。
输入
选择基本形状或多边形预设，或选择自定义多边形以手动编辑顶点。
输出
您的剪裁形状将显示在此处。
与上面预览匹配的内联样式 div — 可粘贴在任何地方。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-clip-path-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"shapeType": "circle",
"circleRadius": "50",
"circleCx": "50",
"circleCy": "50"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-clip-path-generator` tool (CSS Clip-Path Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-clip-path-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 剪裁路径生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
什么是 clip-path？
clip-path 是一个 CSS 属性，它隐藏了你定义的形状外的一切，只显示内部的部分 — 无需图像编辑器、遮罩文件或额外的标记。这是你使用纯 CSS 在普通 <div> 或 <img> 上获得圆形头像、六边形徽章、倾斜的部分分隔线、箭头形按钮和言论气泡标注的方法。
此工具从形状选择器构建一个准备粘贴的 clip-path 声明，带有 CSS 生成内容的实时预览。
如何使用此工具
- 选择 形状 — 基本形状（圆形、椭圆形、Inset）或多边形预设之一（三角形、菱形、五边形、六边形、八边形、星形、消息、箭头、十字、雪佛龙、平行四边形、梯形）。
- 微调它：
- 圆形 — 半径和中心 X/Y，全部作为元素自身框的百分比。
- 椭圆形 — 独立的半径 X/Y 加中心 X/Y。
- Inset — 上/右/下/左插图（每条边从框向内拉动多远）加上可选的圆角半径用于圆角矩形。
- 多边形预设是固定形状 — 改为选择 自定义多边形 以手动编辑顶点列表（见下文）。
- 对于 自定义多边形，编辑 多边形点 字段：逗号分隔的
x% y%对列表，每个顶点一个，按顺序围绕形状（至少 3 个）。上面的每个多边形预设实际上只是幕后的这些列表之一 — 将预设的输出polygon()坐标复制到这里作为起点，如果您想调整一个。 - 复制 CSS 并将其应用于任何元素 —
clip-path适用于图像、div、按钮、任何带有框的内容。预览 显示它看起来完全像什么；HTML 代码片段 在其下方是相同的标记，作为自包含的内联样式<div>，您可以在不方便使用样式表的任何地方粘贴。
为什么同时有 clip-path 和 -webkit-clip-path？
无前缀的 clip-path 属性在所有当前浏览器中都受支持，但 -webkit- 前缀形式与其一起包含，用于仅识别前缀版本的较旧基于 WebKit 的浏览器 — 这是一条廉价的兼容性线，在现代浏览器中毫无代价。
常见问题
我可以动画化 clip-path 吗？
是的 — clip-path 是可动画的，所以在两个相同形状类型的值之间转换（例如相同点数的两个 polygon()，或两个 circle() 半径）会用普通 CSS transition 平稳动画。此工具生成单个静态值；在其旁边添加您自己的 transition: clip-path 0.3s ease;。
所有多边形顶点都需要使用 % 吗？
此工具始终生成百分比，这些百分比随元素自身的大小缩放（最便携的选择）。您可以手动编辑复制的 CSS 以改用 px（如果您需要固定大小的形状）。
为什么 Star 预设的多边形百分比看起来"错误"？ 10 点星的点在从形状中心的外半径和较短的内半径之间交替 — 百分比不是要看起来一致的，它们描绘了星的尖端和内凹口。
clip-path 影响点击/悬停目标吗？
不会 — 在可见剪裁区域外单击仍会在大多数浏览器中击中元素的原始（未剪裁）框，除非您也自己限制指针事件（例如 pointer-events: none 加剪裁叠加层，或重新加工布局，使框就是形状）。
隐私
一切都在您的浏览器中进行。您选择的形状和设置永远不会发送到服务器 — 当您调整控件时，CSS 和预览会在本地生成和更新。