纯CSS折角本质是遮罩，用两个伪元素配合linear-gradient斜向渐变模拟，关键在135deg角度、透明与实色段等长、尺寸精准匹配及盒模型留白。
折角效果本质是遮罩，不是真“切角”
纯CSS做折角（比如右上角撕纸感、标签页斜切），没法靠
或
直接描出锐利斜边——浏览器不支持非直角路径裁剪的像素级控制。真正可靠的做法是用两个叠在一起的
或
伪元素，一个画底色块，一个用
盖出斜线“缺口”，视觉上模拟折角。
用
画斜边必须注意角度和尺寸对齐
常见错误是梯度方向写成
后发现斜边歪了、长度不够，或者在高缩放/高DPI屏上出现模糊锯齿。关键在三点：
——角度得是
或
，对应从左下到右上或右下到左上的斜切
透明段和实色段的长度（如
）必须一致，否则斜边会虚化或错位
伪元素宽高要刚好卡住折角区域，比如右上折角，
设为
、
设为
，再用
反而难控，不如直接定位+梯度裁剪
示例（右上折角）：
盒模型留白和
顺序决定是否露底
折角常被父容器背景盖住，或把内容文字顶开——问题不在渐变本身，而在盒模型没预留空间：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
父元素
必须避开折角区域，比如右上折角，
和
至少留出
伪元素
必须低于内容层（如文字），否则会遮字；但又要高于父背景，否则看不到斜边
若父元素有
，折角伪元素会被裁掉，必须移除或改用
移动端适配时
值会失准
折角大小写死
在iPhone上看着太小，在iPad上又太粗。更稳妥的方式是用
或
动态缩放：
注意：
在这里替代固定像素，让斜边始终居中劈开伪元素，避免因缩放导致比例失调。
折角最难调的其实是边缘过渡——稍有偏差，斜边就发虚或漏白，多试两组
/
长度组合，比调角度更有效。
border-radiusclip-path::before::afterlinear-gradientlinear-gradient45degbackground-image: linear-gradient(135deg, transparent 10px, #fff 10px)135deg315deg10pxwidth20pxheight20pxtransform: 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-indexpaddingpadding-rightpadding-top24pxz-indexoverflow: hiddenoverflow: visiblepx12pxremclamp()div.tag::after {
width: clamp(16px, 3vw, 24px);
height: clamp(16px, 3vw, 24px);
background: linear-gradient(135deg, transparent 50%, #f0f0f0 50%);
}50%transparentcolor