CSS border模拟斜线本质是用零宽高元素的实色border（如border-bottom和border-left）构成直角三角形，再通过transform:rotate(-45deg)旋转成对角线，需父td设position:relative且padding:0以精准定位。
表格单元格内用 CSS border 模拟斜线效果
HTML 原生表格（<table>）不支持单元格内直接画斜线，但可以用一个零宽高元素配合 border 和 transform 在单元格里“伪造”一条从左上到右下的斜线。这个方法本质是画三角形再旋转，不是真线条，但兼容性好、无需 JS。
常见错误是直接给 <td> 加 border-left 或 border-bottom，结果只看到边框交角，不是贯穿单元格的斜线。
- 必须把伪元素（如
::before）设为position: absolute，父<td>要加position: relative -
border-top和border-right设为透明，border-bottom和border-left选其一设为实色，再旋转 45deg 才能对齐对角线 - 斜线长度受 border 宽度和单元格 padding 影响，建议固定单元格
padding: 0避免偏移
示例代码：
<td style="position: relative; padding: 0;">
<div style="
position: absolute;
top: 0; left: 0; width: 0; height: 0;
border-bottom: 20px solid #333;
border-left: 20px solid transparent;
transform: rotate(-45deg) translateX(-8px);
"></div>
内容
</td>
用 Canvas 动态绘制任意角度斜线
如果需要控制起点/终点坐标、动态响应数据变化，或画多条不同角度的斜线（比如从左下到右上），<canvas> 是更可靠的选择。它不依赖 CSS 渲染逻辑，线条就是真实路径。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑是 canvas 坐标原点默认在左上角，且 moveTo(x, y) 的 y 增大方向是向下——初学者常误以为 y 向上才是“正方向”，导致斜线画反。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 先调用
ctx.beginPath()，否则多条线会连成折线 - 注意 canvas 的
width和height是属性（非 CSS 样式），写错会导致缩放失真 - 若需适配高 DPI 屏幕，得用
devicePixelRatio缩放 canvas 绘图上下文
简单起手：
<canvas width="100" height="100"></canvas>
<script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.moveTo(10, 90); // 左下
ctx.lineTo(90, 10); // 右上
ctx.strokeStyle = '#666';
ctx.lineWidth = 1.5;
ctx.stroke();
</script>
Excel/WPS 表格里的“斜线”不能直接搬进 HTML
很多人搜“表格斜线”时实际用的是 Excel 或 WPS，看到右键 → “设置单元格格式” → “边框” → 点击斜线图标就以为 HTML 也有对应功能。但 HTML 没有这种内置单元格装饰机制，<td border="1"> 这类旧属性也早已废弃。
如果你正在把 Excel 表格导出为 HTML，要注意：导出工具（如 Excel 自带“另存为网页”）通常会把斜线渲染成图片或嵌套 <div> + CSS，结构不可维护，且无法响应式缩放。
- 别试图解析导出 HTML 中的 class 名去复刻样式——那些 class 是临时生成的，无规律可循
- WPS 的“绘制斜线表头”功能本质也是插入绝对定位的
<svg>或 canvas，不是语义化表格的一部分 - 真正要兼顾可访问性和语义，斜线只是视觉辅助，关键信息仍应靠文字或 ARIA 属性传达
什么时候该放弃斜线，改用其他表达方式
斜线在表格中绝大多数用于分隔单元格内的两个字段（如“姓名/学号”），但这是纯视觉约定，对屏幕阅读器、打印、移动端缩放都不友好。
如果你发现要反复调试旋转角度、适配不同字号、或者用户反馈“斜线看不清”，说明它已经成了维护负担。
- 优先考虑用斜杠字符
/或竖线|替代图形斜线，语义清晰、缩放稳定 - 双字段场景可拆成两行：
<div>姓名<br><small>学号</small></div> - 需要强调对比关系时，用背景色块+文字颜色区分，比斜线更可靠
斜线不是必须项，它是妥协方案。真正难的是判断——这条线到底有没有不可替代的信息价值。
