CSS clip-path 构建器 (圆、椭圆、多边形、Inset)
颜色
`clip-path` 是把任意 DOM 元素裁剪成非矩形形状的 CSS 属性 — 用于图片蒙版、漂亮的分节符、装饰卡片、自定义按钮、Photoshop 风格悬停效果。语法简短但严格: `circle(r at cx cy)`、`ellipse(rx ry at cx cy)`、`polygon(x1 y1, x2 y2, …)`、`inset(top right bottom left round r)`。本工具提供 3 种可切换背景 (图片、纯色、渐变) 的实时预览，形状参数以滑块 / 数字输入呈现。多边形可编辑每个顶点的 % 坐标，或点击预览任意位置添加新点 — 适合徒手描绘形状。10 个预设多边形 (三角、菱形、五边形、六边形、星形、箭头、对话气泡、平行四边形、梯形、十字) 覆盖常用场景。输出是 clip-path 声明并附带 -webkit-clip-path 回退前缀，可直接粘贴到任何样式表。
—
预览背景
提示: 点击预览在该位置添加多边形顶点。
形状
顶点 (6)
1%%
2%%
3%%
4%%
5%%
6%%
多边形预设
CSS 输出
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);关于 clip-path
clip-path 支持基本形状 (圆、椭圆、多边形、inset)、用 SVG 路径数据的 CSS `path()`、引用内联 SVG <clipPath> 的 `url(#id)`、以及 geometry-box 关键字。本工具输出最广泛支持且易维护的基本形状形式。所有 % 相对元素引用框 (默认 border-box)。元素仍占用原布局 — 裁剪只影响渲染。复杂曲线请画 SVG <path> 并用 clip-path: url(#myShape) 引用。
使用方法
- 选择形状: 圆 (一个半径 + 中心)、椭圆 (两个半径 + 中心)、多边形 (3-16 顶点)、inset (各边裁切的矩形 + 可选圆角)。
- 用滑块或数字输入调整。多边形点击预览任意位置可在那添加顶点。
- 点一个预设 (三角、六边形、星、箭头…) 从已知形状开始编辑。
- 切换预览背景 (图片、纯色、渐变) 看你的形状在真实内容上是什么效果。
- 复制 CSS — 包含现代 `clip-path` 和老 Safari 的 `-webkit-clip-path` 回退。
常见问题
- 为什么 clip-path 用百分比?
- 百分比让形状响应式: `polygon(50% 0%, 100% 100%, 0% 100%)` 三角形不管元素 100px 还是 1000px 都是三角形。也可以用 px、em、rem 绝对单位，但可复用组件几乎总用 %。本工具只输出 % — 粘贴后若确实需要固定尺寸，自行改单位。
- 元素还占用原来的空间吗?
- 是。`clip-path` 是纯绘制时效果 — 元素布局盒子不变，所以周围内容围绕原始矩形流动，而不是裁剪后的形状。如果要布局尊重可见形状，用 `shape-outside` (另一属性)、`mask-image`，或带 path 的 SVG。
- 可以动画 clip-path 吗?
- 可以，但只能在同形状家族同顶点数的 path 之间 — 相同顶点数的多边形之间、圆与圆之间可以，但多边形与圆之间不行。多边形变形要求两种状态点数相同、顺序大致一致。浏览器线性插值顶点坐标。
- inset 的 'round' 值有何用?
- 应用到 inset 矩形 4 个角的可选半径 — 同 `border-radius` 语法。`inset(10% round 5%)` 是圆角矩形裁剪。0 (无 `round`) 得到尖角。CSS 规范允许每个角不同半径 (`round 10% 20% 5% 15%`)，但本工具用单一统一值。
- 为什么 clip-path 和 -webkit-clip-path 都要?
- 14.1 (2021) 之前的 Safari 需要 `-webkit-clip-path` 前缀。几乎所有当前浏览器都支持无前缀 `clip-path`。两个都输出零成本，能保护略旧设备用户。仅针对 evergreen 浏览器可删掉 `-webkit-` 那行。