直接用 background 渐变切右上角容易露白，因渐变默认从左上角铺开且若主背景色写在渐变后会被覆盖；需将渐变放最后并用 background-position: top right 锁定起点。
为什么直接用
渐变切右上角容易露白？
因为渐变层默认从左上角开始铺，
方向的三角形若没锚定位置，会随容器尺寸偏移；更常见的是主背景色写在渐变后面（如
），结果渐变层被纯色盖住——你根本看不见折角。必须把渐变放最后、且用
锁死起点，否则在响应式布局里一缩放就错位。
伪元素切角比纯背景渐变更可控的三个原因
它不依赖父元素背景色，能独立设
避免被内容遮挡；可加
模拟纸张微翘；阴影和边框也能单独控制。但要注意：
必须配合
，否则在 flex 或 grid 容器里可能定位失效。
伪元素默认不占文档流，但若父容器设了
，折角会被裁掉
用
构造三角形（如
）兼容性好，但角度固定为 45°，没法调成 30° 或圆角过渡
用
更灵活，但 Safari 6.1 之前需补
前缀
如何让折角适配渐变背景或图片背景？
纯
渐变方案在非纯色背景下必然穿帮——折角区域只能是单色，盖不住底图。这时必须放弃背景层，改用
画一个「镂空」效果：把伪元素设为透明边框+深色内阴影，再用
切出斜边。但注意
在 Safari 15.4 以下不支持多边形，稳妥做法是双伪元素叠加：
画浅色阴影三角，
叠深色翻起面，两层都用
+
控制大小。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
容易被忽略的细节：文字溢出和点击穿透
折角区域如果只是视觉装饰，得确保它不拦截鼠标事件——加
。但若折角要响应点击（比如跳转链接），就得把它变成可交互元素，此时必须检查
是否高于内容层，否则文字会盖住折角。另外，当卡片有
时，折角和圆角会打架，解决方案只有两个：
（默认值，别乱改）或干脆把圆角设在伪元素上，主容器保持直角。
立即学习
“
前端免费学习笔记（深入）
”；
backgroundto bottom leftbackground: linear-gradient(...), #fffbackground-position: top right::beforez-indextransform: rotate()position: absolutetop: 0; right: 0;overflow: hiddenborderborder-top: 15px solid #f8f8f8; border-right: 15px solid transparentlinear-gradient(-135deg, #f8f8f8 0, #f8f8f8 8px, transparent 9px)-webkit-background::beforeclip-path: polygon()clip-path::before::afterbackground: linear-gradient()background-size: 20px 20pxpointer-events: nonez-indexborder-radiusbackground-clip: padding-box