用::before做斜切角本质是遮罩而非裁剪，通过定位、旋转和颜色匹配模拟纸角效果；需注意伪元素定位、背景渐变配置、圆角协调及鼠标事件处理。
用 ::before 做斜切角，本质是遮罩不是裁剪
斜切角卡片不是靠 clip-path 把角“切掉”，而是用 ::before 画一个带角度的遮罩层盖在右上角，靠颜色匹配和定位制造视觉错觉。直接上 clip-path: polygon() 虽然能出形，但一旦卡片有 border-radius 或背景图，边缘会穿帮或错位——因为 clip-path 裁的是整个盒模型，不区分圆角和内容层。
正确做法是让 ::before 模拟一个“翻起的纸角”：它必须脱离文档流、精确定位、且背景色与卡片一致。否则要么露白边，要么盖不住底图。
-
position: relative必须加在卡片容器上，否则::before的top: 0; right: 0会相对于视口定位 -
content: ""不可省略，否则伪元素不渲染 - 如果卡片本身有
overflow: hidden，::before会被裁掉——得去掉或改用overflow: visible - 斜切角度由
transform: rotate(45deg)控制，但旋转中心点必须设为transform-origin: bottom right，否则顶点对不齐
background: linear-gradient() 方案容易漏掉三个关键配置
很多人写 background: linear-gradient(-135deg, #fff 0, #fff 8px, transparent 9px) 却看不到斜角，问题不在渐变逻辑，而在三处默认行为被忽略：
- 没加
background-position: top right：渐变默认从左上角开始平铺，不指定位置就永远找不到右上角 - 没设
background-size: 24px 24px：不固定尺寸，缩放或响应式时三角形会拉伸变形 - 漏了
background-repeat: no-repeat：否则小三角会横向/纵向重复，变成锯齿带
完整声明应类似：background: linear-gradient(-135deg, #fff 0, #fff 8px, transparent 9px) no-repeat top right / 24px 24px;
斜切角和 border-radius 冲突时怎么协调
当卡片设了 border-radius: 12px，而 ::before 是直角旋转过来的，右上角会出现“双圆角打架”：一个来自卡片自身，一个来自伪元素边缘，视觉上像多了一块凸起。
解决方法只有两个，不能混用：
- 把圆角全部交给
::before：卡片主容器保持直角，::before自己设border-radius: 12px 0 0 0，再旋转，这样缺口更干净 - 让卡片圆角“让位”：用
background-clip: padding-box（这是默认值，别乱改成border-box），确保渐变或伪元素只作用于内容区，不延伸进圆角内侧
千万别试图用 clip-path 去“修”这个冲突——它只会让圆角计算更不可控。
文字内容压在斜切角上时的点击穿透问题
如果卡片里有文字或按钮刚好落在斜切角区域下方，用户点下去可能点不到，因为 ::before 默认会拦截鼠标事件。
常见错误是直接加 pointer-events: none，结果 hover 动效失效或阴影消失。真正要分情况处理：
- 斜切角纯属装饰 → 加
pointer-events: none，确保底层内容可交互 - 斜切角需响应点击（比如跳转标签）→ 必须提升
z-index，并确认它高于所有内容层；同时检查父容器是否用了isolation: isolate或contain: paint，这些会隔离堆叠上下文，导致z-index失效 - 文字溢出斜切角区域 → 用
transform: translateZ(0)强制提升文字层，避免被伪元素遮挡（尤其在 Safari 中）
最易被忽略的是：移动端小屏下，固定尺寸的斜切角会挤压文字行高，建议用 min-width: 200px + 媒体查询动态缩放 ::before 尺寸，而不是无脑用 vw。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
