polygon() 是移动端斜角卡片唯一靠谱的选择，因其在iOS 15.4+/Android Chrome 95+中支持稳定，适配流式布局且兼容X5内核（需-webkit前缀和降级写法）。
直接用 clip-path: polygon() + 视口单位或 CSS 变量，别碰 path() 或动画，否则 iOS 15.3 以下和微信 X5 内核直接不显示。
为什么 polygon() 是移动端斜角卡片唯一靠谱的选择
移动端 Safari（iOS 15.4+）和 Chrome（Android 95+）对 polygon() 支持稳定，而 path() 仅 Safari 15.4+ 实验性支持、不认相对路径指令，X5 内核（≈Chrome 57）压根不解析。流式布局要求形状随容器缩放，polygon() 的百分比坐标天然适配——比如右下斜切写成 polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%)，宽度变窄时斜边比例不变。
常见错误是混用固定像素和百分比：polygon(0 0, 100% 0, 100% 100%, 80px 100%) —— 宽度缩小时斜角会“卡住”在左边缘，视觉断裂。
- 必须全用百分比或视口单位（
vw/vh），避免像素值 - 点数控制在 5–6 个以内，过多顶点在低端安卓机上触发重绘卡顿
- 别在
grid或flex项上同时加transform和clip-path，Safari 会错位
如何让斜角在横竖屏切换时自动适配
硬编码 85% 这类值无法响应方向变化。正确做法是用 CSS 自定义属性 + @media 切换：
/* 默认竖屏斜度 */<br>.card { --skew: 15%; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--skew)) 100%); }<br>@media (orientation: landscape) {<br> .card { --skew: 25%; }<br>}
这样比 JS 动态改 style 更轻量，也避开了 Safari 对 clip-path 的 SVG 引用缓存 bug。
- 别用
inset()模拟斜角——它只支持直角，强行 rotate 容器会导致文字歪斜且重排开销大 - 如果卡片有内边距，确保
padding-bottom≥ 斜角高度对应值，否则文字被裁 - 真机测试时，在 iPhone 上用「设置 → 辅助功能 → 显示与文字大小 → 大字体」开启，验证斜角是否挤压文字
微信 WebView（X5 内核）里斜角失效怎么办
X5 内核不支持无前缀的 clip-path，且只认最简 polygon() 坐标（如 0 0, 100% 0, 100% 100%, 0 100% 这种矩形写法都可能出问题）。必须加 -webkit-clip-path 并降级坐标：
.card {<br> clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);<br> -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);<br>}<br>@supports (clip-path: polygon(0 0)) {<br> .card { clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%); }<br> @supports (-webkit-clip-path: polygon(0 0)) {<br> .card { -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%); }<br> }<br>}
- 兜底方案不是图片，而是用伪元素
::after+transform: skewX(-15deg)盖住右下角，再设overflow: hidden - 别依赖
@supports检测path()—— X5 内核连检测都会失败，直接按不支持处理 - 安卓微信 TBS 内核部分机型支持
clip-path，但动画必掉帧，所有交互效果请用transform+overflow: hidden回退
斜角卡片的真正难点不在写法，而在「坐标精度」：设备像素比越高（比如 iPhone 15 Pro Max），polygon() 中 1% 的偏差在视觉上就可能变成明显锯齿。别靠肉眼调数值，用 DevTools 的样式面板实时拖动百分比，盯着真机预览看齐边效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
