最简折角用::before伪元素实现，通过border-top和border-left构造三角形并rotate(45deg)，需设position:relative和content:""；注意pointer-events、z-index及性能影响。
用伪元素 ::before 实现最简折角（dog ear）
纯 CSS 折角效果本质是用一个带边框的三角形盖在容器右上角，::before 是最轻量、最可控的方式。关键不是“画角”，而是“遮住多余部分+露出斜边”。
常见错误是直接旋转矩形或滥用 clip-path，导致边缘发虚、缩放失真或不支持旧浏览器。
- 容器需设
position: relative，否则伪元素定位失效 - 伪元素用
border-top和border-left构造直角三角形，再通过transform: rotate(45deg)对齐方向 - 必须设
content: ""，否则伪元素不渲染 - 推荐尺寸：
width: 24px; height: 24px;，太大易遮内容，太小锯齿明显
.dog-ear {
position: relative;
}
.dog-ear::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
border-top: 12px solid #ff6b6b;
border-left: 12px solid transparent;
transform: rotate(45deg);
transform-origin: top left;
}
用 clip-path 做平滑折角但要注意兼容性
clip-path 能做出更自然的斜切或圆角折角，但 Safari 15.4 之前不支持 path()，且所有浏览器对 clip-path 的抗锯齿处理不一致——缩放时容易出现毛边。
适用场景：需要响应式折角（比如随容器宽度自适应角度），或配合动画做展开/收起效果。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
polygon()最稳妥：clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 100% 85%, 100% 100%, 0 100%)—— 这样能模拟出“翻起一角”的错觉 - 避免用
path()，除非只支持 Chrome/Firefox 且不缩放 - 若要加阴影，不能直接给被裁剪元素加
box-shadow，得用::after叠一层带阴影的三角形
背景图方案适合复杂纹理但增加 HTTP 请求
当折角要带纸张纹理、渐变或阴影细节时，CSS 绘制会非常吃力，此时用 PNG 背景图反而更稳、更易控制边缘精度。
核心要点不是“怎么贴图”，而是“怎么对齐”和“怎么适配”：
- 图必须是透明底 + 折角区域清晰，尺寸建议 40×40px 以内（够 retina 屏显示）
- 用
background-position: top right+background-size: 24px auto精确锚定右上角 - 为防高 DPI 屏模糊，提供
@2x版本并用image-set()或媒体查询切换 - 不要用
background-repeat，哪怕只设一次也要显式写no-repeat
移动端点击区域被遮挡？检查 pointer-events
折角层（尤其是 ::before）默认会拦截点击事件，导致右上角按钮点不中——这是上线前最容易忽略的问题。
- 如果折角只是装饰，直接加
pointer-events: none到伪元素上 - 如果折角本身要响应点击（比如“关闭”图标），就把交互逻辑移到伪元素内，而不是依赖底层元素
- 用
z-index控制层级时，别只调高折角，还要确认父容器没设overflow: hidden截断事件冒泡
折角效果真正难的不是画出来，而是让它不干扰布局流、不破坏可访问性、不拖慢渲染性能——尤其当页面有多个同类卡片同时渲染时，transform 和 clip-path 的重绘开销差异会立刻显现。
