最稳妥做法是用CSS background-image实现斜线表头：通过linear-gradient(135deg, transparent 48%, #000 48%, #000 52%, transparent 52%)创建斜线背景，配合绝对定位文字，语义清晰且兼容性好；SVG data URI方案更灵活精准，避免缩放失真。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
斜线表头在报表、统计表格中很常见，但原生 <table> 不支持直接画斜线 —— 你得用 CSS 覆盖或 SVG 模拟，而不是靠 <code><th> 里塞 <code>/ 字符硬凑。
用 CSS background-image 实现兼容性最好的斜线
这是最稳妥的做法：给 <th> 设置一个带斜线的渐变背景，文字用绝对定位分区域摆放。好处是语义清晰、可访问性好、不依赖 JS。
<ul>
<li>斜线本质是两个方向相反的线性渐变叠加：<code>linear-gradient(135deg, transparent 48%, #000 48%, #000 52%, transparent 52%)
position: relative 包裹，再用两个 <div> 分别定位左上和右下内容
<li>注意 padding 和 line-height 会影响文字对齐，建议固定 <code>height 和 box-sizing: border-box
th.diagonal {
background-image: linear-gradient(135deg, transparent 48%, #000 48%, #000 52%, transparent 52%);
background-size: 10px 10px;
position: relative;
padding: 0;
height: 80px;
}
th.diagonal > div {
position: absolute;
width: 100%;
text-align: center;
}
th.diagonal .top { top: 6px; }
th.diagonal .bottom { bottom: 6px; }
用 SVG 作为 background-image 更灵活控制斜线粗细和角度
当需要精确控制斜线位置、颜色或适配高 DPI 屏幕时，SVG 是更可控的选择。它不会因缩放失真，也方便动态生成（比如用 JS 注入不同角度）。
- 把 SVG 写成 data URI，避免额外请求，例如：
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cline x1='0' y1='10' x2='10' y2='0' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") - 注意 URL 编码：
/→%2F，#→%23，空格 →%20 - 如果斜线太细看不清，增大
stroke-width或调整 SVG 的width/height
千万别用
+ 空格强行模拟斜线
这种写法看似简单：<th>姓名<br> 学号</th>，但问题一堆：
立即学习“前端免费学习笔记（深入）”；
- 换行位置完全依赖字体、字号、padding，稍一改动就错位
- 响应式下文字折行会彻底破坏结构
- 屏幕阅读器会把两行读作连续文本，语义混乱
- 无法对齐斜线，视觉上永远“差点意思”
移动端适配时斜线容易被压扁或消失
原因通常是 background-size 没随视口缩放，或者 height 固定死导致内容溢出。解决方法很简单：
- 改用
background-size: 2vmin 2vmin（基于视口最小边的百分比） - 把
height改成min-height，并配合padding控制内部空间 - 加一句
background-repeat: repeat确保斜线铺满整个单元格 - 测试时打开 Chrome DevTools 的 device toolbar，切到 iPhone SE 尺寸看是否还对齐
斜线本身不是难点，难的是让它在各种字号、缩放、DPR 下都稳住位置 —— 多数翻车都出在 background-size 和文字定位的耦合关系上。
