用CSS伪元素::before画斜线最轻量可控，核心是用border-bottom和border-left构造三角形并旋转，需设td为position:relative、padding:0，通过transform:rotate()和translate微调位置，注意border-width不超过单元格半宽高。
用 CSS 伪元素画斜线，不是加背景图
HTML <td> 本身不支持“背景斜线”这种属性，background-image 虽然能塞 SVG 或 base64，但维护成本高、缩放易糊、文字对齐难。真正轻量可控的做法是用 ::before 伪元素模拟斜线——本质是画一个零宽高三角形，再旋转成对角线。
关键点：
- 父
<td>必须设position: relative和padding: 0，否则伪元素定位会偏移 - 伪元素用
border-bottom+border-left构成直角边，选其一为实色，另一为透明 -
transform: rotate(-45deg)是标准左上→右下方向；若要右上→左下，改用rotate(45deg) - 斜线粗细由
border-width决定，长度受单元格宽高影响，固定宽高更稳
示例（左上→右下斜线）：
<td style="position: relative; padding: 0; width: 120px; height: 60px;">
<div style="position: absolute; top: 0; left: 0; width: 0; height: 0;
border-bottom: 30px solid #666; border-left: 30px solid transparent;
transform: rotate(-45deg) translateX(-6px);"></div>
内容
</td>
斜线位置总偏移？检查这三处
常见现象：斜线没穿过单元格中心，或只显示半截。这不是代码写错，而是渲染细节没对齐。
立即学习“前端免费学习笔记（深入）”；
最容易忽略的三项：
-
translateX()或translateY()补偿值没调准——旋转后原点偏移，需手动微调，比如translateX(-6px)或translateY(2px) - 单元格
padding不为 0，伪元素按top: 0; left: 0定位，实际从内边距起点算起，导致整体下移/右移 -
border-width大于单元格半宽/半高时，旋转后超出可视范围，看起来像“断掉”——建议border-width≤ min(width, height) / 2
需要多角度斜线？别硬调 rotate 数值
如果斜线不是 45°（比如要匹配某设计稿的 37°），直接改 rotate(37deg) 很容易失准：三角形边长、旋转原点、坐标偏移全得重算。
更稳的替代方案：
- 用
<canvas>绘制：明确指定起点moveTo(x1, y1)和终点lineTo(x2, y2)，角度完全可控，且线条是矢量 - 用 inline SVG：
background-image: url("data:image/svg+xml,...")，把<line>的x1/y1/x2/y2算好填进去，无需 JS，缩放无损 - 避免用
linear-gradient模拟斜线——它本质是条纹，角度稍变就出现锯齿或间隙，尤其在高 DPI 屏幕上明显
表格整体有 hover 高亮，斜线会消失？
当给 <td> 加 :hover { background-color: #f0f9ff; } 时，伪元素斜线常被盖住或变淡。这是因为伪元素默认绘制在内容层之上，但背景色会覆盖它。
解决办法只有两个：
- 给伪元素加
z-index: 1，同时确保父<td>有position: relative（已满足） - 把斜线画在
::after，文字内容用::before或正常文本，再通过z-index分层控制（::after默认层级高于内容） - 不要试图用
background-blend-mode混合——兼容性差，且无法保证斜线颜色在任意背景色下都清晰
斜线不是装饰小部件，它是视觉分隔逻辑的一部分；一旦涉及交互状态，就必须显式管理层叠顺序，这点很容易被跳过。
