最稳妥方案是用::before伪元素配合position: relative的<td>、padding: 0、固定宽高，通过width: 1px、height: 120px、background-color和transform: rotate(-45deg) + transform-origin: top left实现精准斜线，避免skewY拉伸文字或clip-path兼容性问题。
用 ::before 伪元素画斜线最稳妥
HTML 原生 <td> 不支持直接画斜线，::before 是目前兼容性最好、无需 JS、不依赖图片的通用解法。核心不是“画线”，而是用一个窄长矩形旋转后覆盖在单元格左上角。
常见错误是直接给 <td> 加 border-left 或 border-bottom，结果只看到边框交点，根本不是贯穿单元格的斜线。
-
<td>必须设position: relative且padding: 0，否则旋转后的伪元素会偏移 - 伪元素用
width: 1px+height: 120px（值需根据单元格实际宽高微调）+background-color，再配transform: rotate(-45deg) -
transform-origin: top left确保旋转锚点在左上角，避免错位 - 斜线长度对不上？优先调
height值，而不是角度——角度固定为 -45° 或 -63° 才能对齐对角线
transform: skewY() 容易拉伸文字，慎用
有人试过用 skewY(-20deg) 给伪元素变形出斜线效果，但这是个陷阱：它会把整个伪元素（包括背景色区域）连带内部文字一起倾斜，导致内容扭曲、对齐错乱。
它适合做装饰性斜切块，不适合需要精准分隔两段文字（如“姓名/成绩”）的业务场景。
立即学习“前端免费学习笔记（深入）”；
- 若坚持用
skewY，必须把文字单独包裹在子元素里，并反向skewY(20deg)补偿，徒增复杂度 -
skewY的变形原点默认在中心，transform-origin很难对齐单元格角落，稍有偏差就露白边 - 高 DPI 屏幕下，1px 斜线可能糊成 2px，而
rotate+border方案更稳定
Canvas 绘制适合动态或复杂斜线需求
当你要画多条不同角度的斜线（比如左下→右上、左上→右下共存），或斜线要随数据实时重绘（如统计表中按数值自动加斜杠），CSS 伪元素就力不从心了，该上 <canvas>。
最容易栽跟头的是坐标系理解错误：canvas 的 y 轴向下增长，moveTo(10, 90) 是左下角起点，不是左上角。
- 必须显式调用
ctx.beginPath()，否则连续lineTo()会连成折线 -
<canvas width="100" height="100">是真实绘图尺寸，不能只靠 CSS 缩放，否则线条变粗或模糊 - 适配 retina 屏？得用
window.devicePixelRatio动态设置 canvas 的width/height属性，再缩放ctx - 斜线位置要绑定单元格 DOM 尺寸？得用
getBoundingClientRect()实时读取，别硬写死像素值
固定宽高是 CSS 斜线方案的前提
所有基于 transform: rotate() 或 skewY() 的 CSS 方案，都要求目标 <td> 有明确的 width 和 height。流式布局下自动撑开的单元格，斜线大概率错位或截断。
这不是 bug，是几何计算使然：旋转后的伪元素定位依赖父容器的盒模型边界，边界不定，定位就飘。
- 哪怕只设
min-width和min-height都不够，必须是确定值（如120px、60px） - 响应式场景下，可用媒体查询分段设置不同尺寸，或改用 Canvas + ResizeObserver 监听尺寸变化
- 表格用了
table-layout: fixed？那列宽已锁定，此时加斜线反而更稳
