clip-path: polygon()坐标对不上主因是坐标系错位：默认以border-box左上角为原点，但object-fit或background-size使内容偏移；须固定容器尺寸、统一用%单位、顺时针闭合顶点，并优先用SVG clipPath实现等比缩放。
clip-path: polygon() 切多边形图片时坐标总对不上？
不是代码写错了，是坐标系没对齐。默认 clip-path: polygon() 以元素的 border-box 左上角为 (0, 0)，但图片常通过 object-fit: cover 或 background-size: contain 缩放居中，实际内容区域和盒模型不重合——这就导致你写的 50% 0% 看似在顶部正中，实际可能切到额头或下巴。
解决的关键是：固定容器尺寸 + 统一用绝对单位或严格比例 + 把 img 嵌套进裁剪容器里，而不是直接给 img 加 clip-path。
- 给外层
div设定明确的width和height（比如200px），不要依赖图片原始尺寸 -
img放在里面，设width: 100%; height: 100%; object-fit: cover; - 所有
polygon()坐标用%单位时，必须确保容器宽高比恒定（如正方形）；否则六边形会压扁成菱形 - 避免混用
px和%，例如20px 0%, 100% 20px在响应式下极易错位
六边形、五边形等常见多边形怎么写坐标
顺时针列顶点最稳妥，别交叉、别跳点。浏览器按顺序连线，顺序错一个，形状就崩了。
六边形（上下顶点 + 左右斜边）标准写法：
立即学习“前端免费学习笔记（深入）”；
.hexagon {
width: 200px;
height: 200px;
clip-path: polygon(
50% 0%, /* 上顶点 */
100% 25%, /* 右上 */
100% 75%, /* 右下 */
50% 100%, /* 下顶点 */
0% 75%, /* 左下 */
0% 25% /* 左上 */
);
}五角星需要精确顶点，建议用工具生成或从 SVG 导出：clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%)。手算容易漏点，复制时注意逗号分隔和空格无关紧要，但括号必须闭合。
为什么用 inset() 切角比 polygon() 更稳？
inset() 是专为“切掉矩形四角”设计的，语法自带圆角支持，不用手动算八个点。比如切掉四角各 20px 并加圆角：
.cut-corners {
clip-path: inset(20px round 12px);
}这等价于切掉上、右、下、左各 20px，再给四个新角加 12px 圆角。而用 polygon() 写同样效果要列 8 个点+calc() 计算，稍有误差就露白边。
-
inset(top right bottom left round tl tr br bl)，round后可跟 1–4 个值，类似border-radius - 不支持斜角（比如只切右下角），也不支持非直角多边形，但它快、准、兼容性好（Chrome 55+/Firefox 54+）
- 如果项目要兼容 Safari 15.4 以下，
inset()的round参数需加-webkit-前缀
响应式多边形切角怎么保形不歪
纯 CSS 的 polygon() 百分比方案在移动端几乎必然走样——因为 100% 指的是当前容器宽或高，宽高比一变，顶点位置就偏移。真正可靠的方案是 SVG <clipPath>：
<svg width="0" height="0" style="position: absolute">
<defs>
<clipPath id="hex" viewBox="0 0 200 200">
<polygon points="100,0 200,50 200,150 100,200 0,150 0,50"/>
</clipPath>
</defs>
</svg>
<div class="avatar" style="clip-path: url(#hex)"></div>viewBox="0 0 200 200" 定义了独立坐标系，<polygon points> 里的数值是绝对像素，缩放时自动等比适配。这个方案在 iOS Safari、Android Chrome 全系稳定，且能配合 transform: scale() 动画无撕裂。
复杂点在于：SVG 必须内联或同域引用，不能跨域；clip-path: url(#id) 在部分旧版 Firefox 中需启用 layout.css.clip-path-shapes.enabled 标志——但 2026 年主流环境已无需担心。
