polygon()裁剪必须统一顶点顺序（顺时针或逆时针）并优先使用%、rem等相对单位，否则在缩放、高DPI或响应式场景下会错位甚至反向裁剪。
直接说结论：用 polygon() 做多边形裁剪，必须按顺时针或统一逆时针顺序写顶点坐标，且优先用百分比（%）或相对单位（如 0.5rem），别硬写 px；否则在缩放、高 DPI 或响应式场景下会错位甚至反向裁剪。
为什么 polygon() 坐标顺序错了会“反向显示”
浏览器把 polygon() 顶点连成封闭路径后，按 SVG 填充规则（默认 nonzero）判断“内部”——但裁剪逻辑是“只显示路径内部”，所以顺序一反，内部就变成外部。结果不是“没裁”，而是“裁掉了该留的部分”。
- 常见错误现象：
polygon(0 0, 100% 0, 100% 100%, 0 100%)正常；但写成polygon(0 0, 0 100%, 100% 100%, 100% 0)（逆时针混入）可能在 Safari 中完全不显示 - 调试技巧：先用 4 点矩形验证顺序，再逐步加点；可用 Chrome DevTools 的
clip-path可视化面板拖动预览 - 稳妥做法：全部按顺时针写，例如右上角斜切 ——
polygon(0 0, 100% 0, 100% 20%, 80% 0)（注意最后一点要闭合到起点附近）
polygon() 里用 % 还是 px？
用 % 或 rem，除非你明确控制了父容器尺寸且永不缩放。因为 polygon() 的坐标系锚定在元素的 border-box，而 px 值在字体缩放、系统缩放（如 Windows 125%）、暗色模式切换时不会自适应。
- 错误示例：
polygon(0 0, 200px 0, 200px 50px, 0 50px)—— 在 2x Retina 屏上看起来小一半 - 推荐写法：
polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%)或polygon(0 0, 100% 0, calc(100% - 2rem) 100%, 2rem 100%) - 注意：
calc()在polygon()中支持良好（Chrome 90+、Firefox 88+、Safari 15.4+），但旧 Safari 需降级为纯%
如何避免内容被 polygon() 一起裁掉
clip-path 作用于整个元素盒，包括子内容。如果只是想裁背景或边框，别直接套在内容容器上。
- 安全做法：用伪元素做背景层，主容器只负责内容布局
.card { position: relative; }<br>.card::before { content: ""; position: absolute; inset: 0; background: #333; clip-path: polygon(0 0, 100% 0, 100% 80%, 70% 100%, 0 100%); } - 慎用
overflow: hidden替代：它只裁溢出，不改变盒模型尺寸，对polygon()形状无约束 - 真正需要裁内容时（如头像六边形），确保父容器有明确宽高，且子元素不依赖被裁区域定位
最易被忽略的一点：Safari 对 polygon() 的解析更严格，少一个逗号、多一个空格、坐标缺单位（比如 50 没写 50%），都可能导致整条声明失效——建议开发时始终打开 Safari Web Inspector 的 Rendering 标签页看是否报 clip-path 解析警告。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
