斜角卡片必须用clip-path: polygon()实现，因其可精确定义局部裁切轮廓；常见错误包括顶点顺序错、单位混用、路径未闭合、calc()兼容性差及边框阴影丢失，需用伪元素或filter补全。
直接用 clip-path: polygon() 写顶点坐标，就能实现斜角卡片——但顺序错一个、单位混用或没处理伪元素边框，斜角就会“断开”或“消失”。
斜角卡片必须用 polygon()，不能靠 border-radius 或 transform
因为 border-radius 只能做圆角，transform: skew() 会整体扭曲内容（文字也歪），而斜角是局部裁切：比如右上角切掉一块三角形，其余区域保持原样。只有 polygon() 能精确定义裁剪轮廓的每个顶点。
常见错误现象：clip-path: polygon(0 0, 100% 0, 100% 20px, 80% 0) —— 最后一点回到 80% 0，导致路径不闭合，浏览器可能直接忽略整个声明。
实操建议：
- 顶点数至少 4 个，且首尾必须逻辑闭合（例如从左上开始，按顺时针绕一圈回到起点附近）
- 所有坐标统一用
%或统一用px，别混用；百分比基于元素自身宽高，更适配响应式 - 斜角大小建议用
calc()动态计算，比如右上斜角：顶点设为100% 0,calc(100% - 24px) 0,100% 24px
polygon() 坐标顺序写反会导致斜角方向错误
斜角朝向完全由顶点书写顺序决定。比如想做「右上斜切」，典型顶点序列是：0 0 → 100% 0 → 100% 20px → calc(100% - 20px) 0 → 回到 0 0（隐式闭合）。如果把后两点颠倒成 calc(100% - 20px) 0 → 100% 20px，斜角就变成朝左下“凸出”，视觉上像被补了一块。
实操建议：
- 在纸上画个矩形，标出左上为
(0, 0)，顺时针标出你要保留的边界点 - 右上斜角：保留左、下、右三边，只切右上小三角 → 关键三点是
100% 0（右上角）、100% h（右上斜边底）、w 0（斜边顶），其中h和w是斜边尺寸 - 用 Chrome DevTools 实时编辑
polygon()值，拖动数值看顶点实时移动，比猜快得多
斜角裁切后边框/阴影丢失，得用 ::before/::after 补
clip-path 裁的是整个盒模型的**渲染区域**，包括 border、box-shadow、背景色——全被一起切掉。所以你看到的“无边框斜角”，其实是边框真没了，不是隐藏了。
实操建议：
- 给卡片加
position: relative，再用::before伪元素模拟斜边：绝对定位 +width: 100%+height: 1px+background+transform: rotate(-45deg) - 注意旋转中心点：用
transform-origin: top right控制斜边起始位置，避免飘移 - 阴影不能靠伪元素硬加，得用多层
box-shadow模拟，或改用filter: drop-shadow()（它作用于裁切后的形状）
移动端 Safari 对 clip-path: polygon() 的 calc 兼容性要小心
iOS 15.4+ 支持 calc() 在 polygon() 中，但旧版 Safari（如 iOS 14）会直接忽略含 calc() 的整条声明，退回到矩形。用户看到的就是“没斜角”的卡片。
实操建议：
- 关键场景（如营销页首屏）提供降级：用
@supports (clip-path: polygon(0 0))包裹斜角样式，不支持时 fallback 为border-radius: 4px - 避免在
polygon()里嵌套多层calc(calc())，Safari 解析容易失败 - 真机测试比模拟器靠谱——iOS 模拟器常误报兼容性
最易被忽略的一点：斜角的“厚度”其实是两个坐标差值，比如 100% 0 到 100% 24px 的垂直距离就是斜边高度，这个值一旦和字体行高、内边距不协调，卡片整体比例就会突兀。调斜角，本质是在调视觉节奏，不是只改几个数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
