html原生不支持斜线表头，最稳妥方案是使用base64编码的svg作为background-image，因其矢量特性、宽高无关、兼容性好；而border+transform三角形易受padding/font-size影响偏移，linear-gradient无法固定线宽且响应式下角度失准。
HTML原生 <table> 不支持斜线表头，必须用 CSS 模拟；最稳妥、兼容性最好的方案是 SVG 背景图，而不是 border 三角形或 transform 旋转 div。
<h3>用 base64 SVG 作为 background-image 最省心</h3>
<p>直接把 SVG 写进 CSS 的 <code>background-image 里，不用额外请求文件，也不依赖父容器宽高或 padding。关键点在于：SVG 中的 <line></line> 坐标必须设为相对单位（x1="0" y1="0" x2="100%" y2="100%"），否则缩放或响应式下会错位。
-
stroke控制颜色，支持#333、rgb(51, 51, 51)、rgba(0,0,0,0.7)等写法 -
stroke-width是像素值，设为1或2即可，不要用em或% - base64 编码前，SVG 字符串不能换行、不能有空格，否则解码失败；可用在线工具一键生成
- 示例 class：
.slash-header { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPg==') no-repeat right center / 8px 8px; }
为什么不用 border + transform 画三角形？
这个方案看着巧妙，但实际踩坑密集：它本质是画一个零宽高元素的直角三角形再旋转，结果高度和位置严重受 border-width、padding、font-size 影响，稍一改样式就偏移。尤其当单元格内容动态变化（比如文字换行、字体缩放）时，斜线立刻“漂”走。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须给
<td> 加 <code>position: relative和padding: 0，否则transform定位失效 -
border-bottom和border-left宽度必须相等，否则旋转后不是 45° 斜线 -
transform: rotate(-45deg)的原点默认在元素中心，得加transform-origin: top left才对齐左上角 - 高 DPI 屏幕下线条会模糊，因为 border 是 raster 渲染，SVG 是矢量
- 想让线“看起来细”，只能调低透明度或改颜色对比度，但视觉上仍是模糊带，不是清晰线条
- 当单元格宽高不等（比如 200×50px）时，
to right top画出的不是从左下到右上的对角线，而是倾斜角度错误的线 - IE10+ 支持该语法，但旧版 Android WebView 有渲染 bug，斜线可能断裂或消失
background-gradient 方案的致命缺陷
用 linear-gradient(to right top, ...) 模拟斜线，代码短、写起来快，但线宽无法固定——它本质是两色渐变交界，粗细随容器尺寸缩放，根本没法控制成 1px 实线。
真正上线项目别碰 border 三角形和 gradient，SVG base64 是唯一能兼顾精度、兼容性和维护性的选择；如果斜线要随数据动态变色或角度，就得切 Canvas 或 SVG 标签内嵌，CSS 背景方案此时已到能力边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
