CSS折角效果：线性渐变与盒模型技巧

本文深入解析了纯CSS实现精准折角效果的核心原理与实战技巧，指出其本质是通过两个伪元素配合135deg线性渐变进行视觉遮罩，而非真正“切角”；重点强调角度必须为135deg/315deg、透明与实色段等长、尺寸严格匹配及盒模型合理留白，并针对移动端适配提出clamp()动态缩放方案，辅以z-index层级控制和overflow处理等易错细节，帮你避开模糊、错位、遮挡等常见陷阱，轻松复现锐利稳定的撕纸感或标签斜切效果。

折角效果本质是遮罩，不是真“切角”

纯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长度组合，比调角度更有效。

好了，本文到此结束，带大家了解了《CSS折角效果：线性渐变与盒模型技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！