CSS Clip-Path 生成器

示例：商品卡片的斜角标签

电商详情页常见的「限时折扣」标签，右侧是斜边。点「菱形」预设得到 4 个顶点，再在列表里改成下面的坐标：

.element {
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
}

坐标都是百分比，标签文字变长、宽度变大时，斜边比例保持不变。如果需要六边形头像框，直接点「六边形」预设：

输出为 polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)。

示例：横幅上的圆形

把预览比例切到 2:1，选「圆形」，半径保持 50%。生成的值是 circle(50% at 50% 50%)，但虚线圆的直径大于横幅高度。按 CSS Shapes Level 1，百分比半径以参考框的方向无关尺寸为基准，即对角线长度除以 √2。在 400 × 200 的元素上：

半径是 158.11px，圆的上下两端被元素自身边界截掉。我们在 Chromium 中用 document.elementFromPoint() 验证过：圆心右侧 155px 处命中元素，162px 处命中背后的 body。要让形状贴合四条边，改用「椭圆」。

精确微调：小数与方向键

在 300px 的预览上，把三角形顶部顶点向右拖 7px、向下拖 3px，结果是：

52.33% 1%。工具保留两位小数，不会取整到整数百分比。用键盘时，从 50% 0% 先按一次右方向键、再按一次 Shift+下方向键：

顶点变为 51% 10%。

与其他生成器的差别

2026 年 10 月 3 日，我们实测了 cn.bing.com 搜「css clip-path 在线生成」排第一的 365 工具箱，以及 Clippy（Bennett Feely）、ZERONOVA LAB、ToolBada。365 工具箱、Clippy 和 ZERONOVA LAB 中，把顶部顶点向右拖 7px、向下拖 3px，输出 52% 1% 或 53% 1%，都取整到整数；控制点是没有 Tab 焦点的 div，不能用键盘移动。ToolBada 用文本框编辑顶点，没有拖拽控制点。

四个工具都不接受 path()、shape()、rect()、xywh() 或参考框。它们的预设更多：Clippy 有 27 个形状选项，365 工具箱有 14 个预设，本工具只有 5 个预设。需要小数坐标、键盘操作，或想让自己的浏览器校验一段原始 CSS 时，用本工具更合适。

CSS 原值模式

「CSS 原值」标签页接受任意基本形状或参考框，用当前浏览器的 CSS.supports('clip-path', 值) 判断能否使用，并直接预览。下拉菜单里有 path()、shape() 和 inset(10% round 16px) content-box 的示例。注意 path() 里的坐标单位是 CSS 像素，不随元素缩放；shape() 可以用百分比。

不写参考框时，形状按 border-box 计算，CSS Masking 规范允许改成 padding-box、content-box 等。勾选「显示参考框」后，预览元素会加 12px 边框和 16px 内边距，并用三条虚线标出 border-box、padding-box 和 content-box，便于看清形状贴着哪条边。

url()、var()、env()、注释和转义字符会被拒绝，因为它们依赖使用页面的上下文，在这里预览不可靠。括号或引号没有闭合的值也会被拒绝。在 Chromium 中，CSS.supports('clip-path', 'polygon(50% 0%, 100% 100%') 返回 true，因为解析器在输入结尾自动补上括号；同样的文本粘贴进样式表却会破坏这条规则。原值只预览，不会转换成控制点。值被拒绝时，状态行写出原因和位置：circle(50%)) 显示「第 12 个字符：「)」没有对应的「(」。」，polygon(0 0, 100% 0, 50%) 显示「polygon() 第 3 个点有 1 个值。」函数名拼错时会给出建议（polgon() → polygon()）。

动画与限制

做形变动画时，CSS Shapes 的插值规则要求两个值使用同一种函数，polygon() 还要顶点数和填充规则一致。内置预设的顶点数各不相同（菱形 4、六边形 6、星形 10），从菱形过渡到六边形会直接跳变。先补齐顶点数，再到 Cubic Bezier 曲线生成器挑一条缓动曲线。

其他限制：

• 控制点模式的数值范围是 0–100%。顶点要放到元素外面时，在「CSS 原值」里手写。
• 内嵌的上下（或左右）偏移之和超过 100% 时，会按比例缩小到正好 100%，形状面积为 0（见下方示例）。
• 内嵌的圆角只有一个百分比。需要椭圆角或像素圆角时，在「CSS 原值」里手写。
• shape() 需要 Chrome 135、Firefox 148 或 Safari 18.4 以上，rect() 和 xywh() 需要 Chrome 119、Firefox 122 或 Safari 17.2 以上（MDN 兼容性数据 8.1.4）。
• 形状外的 box-shadow 和焦点轮廓也会被裁掉；形状外的区域不参与点击命中。

例如在 400 × 200 的元素上设上 70%、下 50%，缩小后的上偏移、下偏移和剩余高度依次是 58.33% / 41.67% / 0px，什么都不显示。

只需要一个三角形、又不想用 clip-path 时，可以用 CSS 三角形生成器的边框写法。