Clip-path 生成器

如何使用Clip-path 生成器

关于Clip-path 生成器的常见问题

clip-path 生成器生成的代码能直接用吗？

能。代码区里的那一串就是预览元素正在使用的 clip-path 值，复制物与预览出自同一个字符串，粘进样式表即可生效。所有计算都在浏览器本地完成，顶点坐标不会发送到服务器，本工具也不在本地存储里保存你的形状，只记住导出格式、精度这类展示偏好。注意百分比坐标按元素自身的宽高解析，换到不同尺寸的元素上形状会跟着等比拉伸。

clip-path polygon 的坐标怎么写？

polygon() 里按顺序写每个顶点的「x y」，顶点之间用逗号分隔，浏览器会把最后一个点自动连回第一个点。坐标可以用百分比或 px，百分比的 x 按元素宽度、y 按元素高度计算，除 0 以外都必须带单位。例如本页默认的六边形就是 polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)。点数没有硬性上限，本工具最多编辑 100 个顶点。

clip-path 用百分比还是 px 好？

大多数场景用百分比：形状会随元素尺寸等比缩放，卡片、按钮、头像换个大小都不用改代码。只有需要「固定像素」的细节时才用 px，比如永远 12px 宽的斜切角或箭头尖。两者也可以混写在同一个 polygon 里。本工具里切单位是一个显式的换算动作，按当前预览尺寸把全部坐标换过去，元素尺寸变了换算结果就不再成立。

clip-path circle(50%) 为什么不贴边？

因为 circle() 的百分比半径既不按宽也不按高，而是按「√(宽²+高²)/√2」解析。只有正方形元素上 50% 才刚好等于半边长；在本页默认 240×160 的长方形上，circle(50%) 的半径约 102px，左右碰不到边、上下又会超出。想要贴着短边的圆，用 circle(closest-side)；想要椭圆铺满，用 ellipse(50% 50%)。

clip-path 加了 box-shadow 阴影不显示怎么办？

box-shadow 画在元素边框之外，而 clip-path 会把元素轮廓以外的一切连同阴影一起裁掉，所以阴影必然消失。解决办法是给外面包一层父元素，在父元素上写 filter: drop-shadow()：投影会沿着子元素被裁剪后的真实形状生成。outline 与溢出的内容同理，超出裁剪区域的部分都看不见。

clip-path 裁掉的部分还能点击吗？

不能。clip-path 不只是视觉效果，浏览器的命中测试也按裁剪后的区域计算，被裁掉的那部分既不显示也接收不到点击、悬停。这在做不规则按钮时很好用，但也意味着形状越瘦，可点区域越小，移动端要留意触控面积是否足够。

clip-path 动画为什么不平滑过渡？

clip-path 能写进 transition，但只有两端形状「可插值」时才会平滑变化，否则会在中途直接跳变。规则是：两端必须是同一种形状函数；polygon 的顶点数与 fill-rule 都要相同；circle 与 ellipse 的半径不能用 closest-side 这类关键字。单位不同（一端 px、一端百分比）反而可以过渡。本工具的过渡动画助手会实时判断，顶点数不同时还能一键补齐。

clip-path 的 evenodd 和 nonzero 有什么区别？

两者只在多边形自相交时才有区别。nonzero 是默认值，被边绕了两圈的区域仍然填充；evenodd 则按奇偶判定，绕两圈的区域会被镂空。用 5 个点按隔一个连一个画出的五角星有 5 处自相交，中心那个五边形在 nonzero 下是实心的，在 evenodd 下是空心的。形状不自相交时选哪个结果都一样，代码里也不必写。

怎么用 clip-path 做六边形和五角星？

六边形是 6 个顶点的 polygon：polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)。五角星则需要 10 个顶点，5 个外角点与 5 个内凹点交替排列，本工具按正五角星的内外半径比现算坐标，点「五角星」预设即可载入。两者都是按百分比写的，元素不是正方形时会被等比拉伸。

clip-path 生成器能导出 Tailwind 类名吗？

能。切到「Tailwind」标签会得到任意属性写法，例如默认六边形是 [clip-path:polygon(50%_0,100%_25%,100%_75%,50%_100%,0_75%,0_25%)]，值里的空格按 Tailwind v3.4 语法转成了下划线，编译时会还原。这种写法不依赖任何插件，本工具已用真实的 Tailwind 编译器核对过 polygon、circle 关键字半径与带圆角的 inset。

clip-path 需要加 -webkit- 前缀吗？

基本不需要。clip-path 兼容性在今天已经很好，现代主流浏览器对 polygon、circle、ellipse、inset 这四种基本形状都支持无前缀写法；-webkit-clip-path 只为 iOS Safari 13 及更早的版本兜底。本工具默认不输出前缀，CSS 标签下勾选「附带 -webkit-clip-path」才会多写一行。

clip-path 生成器的 inset 圆角怎么写？

inset() 先写上右下左四个内缩值，规则和 margin 一样可以简写成 1 到 4 个；要圆角就在后面加 round 和一段 border-radius 写法，例如 inset(10% round 12px)。round 后面支持完整的 border-radius 语法，包括斜杠分开的椭圆圆角。本工具这部分直接复用了站内圆角生成器的同一套实现，超出内矩形的圆角会按规范等比缩小。

clip-path 和 border-radius 有什么区别？

只要圆角矩形或圆形，首选 border-radius：它会保留阴影与边框，写法也短。clip-path 适合 border-radius 做不到的形状，比如多边形、斜切角、箭头、星形，代价是元素轮廓外的阴影、outline 会被一起裁掉，被裁区域也不再响应点击。两者可以叠加使用，但裁剪始终以 clip-path 为准。

clip-path 参数含义速查表

clip-path 用一个形状把元素「剪」出来，形状以外的部分既不绘制也不响应点击。它在中文里也叫 CSS clip-path 生成器、clip-path 在线生成工具或 CSS 裁剪形状生成器；英文站点上搜 css clip path generator、clip path maker 找到的也是这类工具，前端圈常说的「类似 Clippy 的 clip-path 生成器」指的就是它。下表是四种基本形状函数的写法与参数含义。

polygon 多边形顶点怎么写：百分比与 px

polygon 多边形裁剪按顺序连接各顶点，最后一个点自动连回第一个点，所以顶点的先后顺序决定了形状本身 —— 同样 5 个点，换个连接顺序就从五边形变成了自相交的星形。clip-path 百分比坐标的 x 按元素宽度、y 按元素高度解析，形状随元素尺寸等比拉伸；px 坐标则是固定的像素位置。两者可以混用，0 可以不写单位，其余数值都必须带单位。

坐标也允许小于 0 或大于 100%：超出元素边框的部分本来就没有内容可画，只有元素带阴影、outline 或有溢出内容时才看得出区别。本工具的拖拽手柄会夹在元素范围内，需要越界坐标时在顶点表里直接输入。

circle 圆形的百分比半径按什么算

clip-path 圆形用 circle()，clip-path 椭圆用 ellipse()。最反直觉的一点是 circle() 的百分比半径：它既不按宽、也不按高，而是按参照盒对角线长度除以 √2。在本页默认240×160 的预览盒上，circle(50%) 的半径约 102px —— 比半宽 120px 小、比半高 80px 大，于是左右不贴边、上下被裁出平边。这正是很多人觉得「circle(50%) 怎么不是内切圆」的原因。

自相交多边形与 fill-rule 的区别

当多边形的边彼此交叉时，「哪里算里面」就有了两种答案，由 fill-rule 决定。nonzero 是默认值：被边绕过一圈以上的区域都算里面，所以被绕两圈的中心区域仍然填充。fill-rule evenodd 则数穿过边界的次数，偶数次算外面，于是被绕两圈的区域会被镂空。本工具的「五角星（自相交版）」预设用 5 个点隔一个连一个，共有 5处自相交，切换两个按钮就能看到中心五边形一实一空。

形状不自相交时，两种规则的结果完全一样，代码里也不必写 fill-rule。本工具会实时检测自相交并在预览上标出交点；自相交的形状面积依赖填充规则，因此几何信息条不给出可见面积，免得给你一个可能错的数。

clip-path 不生效：阴影被裁掉与点击区域

写了 clip-path 却觉得「不生效」或「效果不对」，多半是下面几种情况之一。最常见的是 clip-path 阴影被裁掉：box-shadow 画在元素轮廓之外，而裁剪会把轮廓外的一切都剪掉。其次是 clip-path 点击区域的问题：被裁掉的部分不再响应点击与悬停，按钮形状越瘦，可点范围越小。

clip-path 动画要求顶点数相同

clip-path 动画靠的是浏览器在两个形状之间做插值，它只在两端「长得一样」时成立：必须是同一种形状函数（circle 不能过渡到 ellipse，polygon 不能过渡到 inset）；polygon 的顶点数与 fill-rule 都要相同；circle 与 ellipse 的半径若用了 closest-side 这类关键字，也只能跳变。单位不同反而没关系，一端 px、一端百分比照样能平滑过渡。

顶点数不同是最常见的跳变原因，比如三角形想变成六边形。本工具的过渡动画助手会在点数少的那个形状的最长边上插入中点，直到两端点数一致 —— 插中点不会改变形状本身，起点看起来还是那个三角形，但已经可以平滑地长成六边形了。助手最后给出一段 transition 加 :hover 的示例 CSS，不生成多帧 keyframes。

常用形状配方：六边形、五角星与箭头

下面这些配方由本站的预设表现算渲染，与工具里点预设载入的是同一串代码。用 CSS 多边形做六边形、五角星、梯形这类图形时，坐标都写成百分比，形状会铺满元素；如果元素不是正方形，正多边形会被等比拉伸。CSS 箭头形状、V 形步骤条与对话框也都是 polygon。工具内共有 33 个预设，默认六边形保留了 75.0% 的面积。

只需要一个小三角形箭头或气泡尖角时，CSS 三角形生成器提供了 border 与 clip-path 两种写法和气泡描边；只要圆角矩形或胶囊形，用圆角生成器写 border-radius 更省事，还能保留阴影。