纯css折角本质是遮罩，用两个伪元素配合linear-gradient斜向渐变模拟，关键在135deg角度、透明与实色段等长、尺寸精准匹配及盒模型留白。
折角效果本质是遮罩，不是真“切角”
纯CSS做折角（比如右上角撕纸感、标签页斜切），没法靠border-radius或clip-path直接描出锐利斜边——浏览器不支持非直角路径裁剪的像素级控制。真正可靠的做法是用两个叠在一起的::before或::after伪元素，一个画底色块，一个用linear-gradient盖出斜线“缺口”，视觉上模拟折角。
用linear-gradient画斜边必须注意角度和尺寸对齐
常见错误是梯度方向写成45deg后发现斜边歪了、长度不够，或者在高缩放/高DPI屏上出现模糊锯齿。关键在三点：
-
background-image: linear-gradient(135deg, transparent 10px, #fff 10px)——角度得是135deg或315deg，对应从左下到右上或右下到左上的斜切 - 透明段和实色段的长度（如
10px）必须一致，否则斜边会虚化或错位 - 伪元素宽高要刚好卡住折角区域，比如右上折角，
width设为20px、height设为20px，再用transform: rotate(45deg)反而难控，不如直接定位+梯度裁剪
示例（右上折角）：
div.tag::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 24px; height: 24px;
background: linear-gradient(135deg, transparent 12px, #f0f0f0 12px);
}
盒模型留白和z-index顺序决定是否露底
折角常被父容器背景盖住，或把内容文字顶开——问题不在渐变本身，而在盒模型没预留空间：
立即学习“前端免费学习笔记（深入）”；
- 父元素
padding必须避开折角区域，比如右上折角，padding-right和padding-top至少留出24px - 伪元素
z-index必须低于内容层（如文字），否则会遮字；但又要高于父背景，否则看不到斜边 - 若父元素有
overflow: hidden，折角伪元素会被裁掉，必须移除或改用overflow: visible
移动端适配时px值会失准
折角大小写死12px在iPhone上看着太小，在iPad上又太粗。更稳妥的方式是用rem或clamp()动态缩放：
div.tag::after {
width: clamp(16px, 3vw, 24px);
height: clamp(16px, 3vw, 24px);
background: linear-gradient(135deg, transparent 50%, #f0f0f0 50%);
}
注意：50%在这里替代固定像素，让斜边始终居中劈开伪元素，避免因缩放导致比例失调。
折角最难调的其实是边缘过渡——稍有偏差，斜边就发虚或漏白，多试两组transparent/color长度组合，比调角度更有效。
