HTML原生不支持斜线表头，最稳妥方案是使用base64编码的SVG作为background-image，因其矢量特性、宽高无关、兼容性好；而border+transform三角形易受padding/font-size影响偏移，linear-gradient无法固定线宽且响应式下角度失准。

HTML原生

不支持斜线表头，必须用 CSS 模拟；最稳妥、兼容性最好的方案是 SVG 背景图，而不是 border 三角形或 transform 旋转 div。

用 base64 SVG 作为 background-image 最省心

直接把 SVG 写进 CSS 的 background-image 里，不用额外请求文件，也不依赖父容器宽高或 padding。关键点在于：SVG 中的 坐标必须设为相对单位（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 影响，稍一改样式就偏移。尤其当单元格内容动态变化（比如文字换行、字体缩放）时，斜线立刻“漂”走。

• 必须给

加 position: relative 和 padding: 0，否则 transform 定位失效

border-bottom 和 border-left 宽度必须相等，否则旋转后不是 45° 斜线

transform: rotate(-45deg) 的原点默认在元素中心，得加 transform-origin: top left 才对齐左上角

高 DPI 屏幕下线条会模糊，因为 border 是 raster 渲染，SVG 是矢量

background-gradient 方案的致命缺陷

用 linear-gradient(to right top, ...) 模拟斜线，代码短、写起来快，但线宽无法固定——它本质是两色渐变交界，粗细随容器尺寸缩放，根本没法控制成 1px 实线。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 想让线“看起来细”，只能调低透明度或改颜色对比度，但视觉上仍是模糊带，不是清晰线条
• 当单元格宽高不等（比如 200×50px）时，to right top 画出的不是从左下到右上的对角线，而是倾斜角度错误的线
• IE10+ 支持该语法，但旧版 Android WebView 有渲染 bug，斜线可能断裂或消失

真正上线项目别碰 border 三角形和 gradient，SVG base64 是唯一能兼顾精度、兼容性和维护性的选择；如果斜线要随数据动态变色或角度，就得切 Canvas 或 SVG 标签内嵌，CSS 背景方案此时已到能力边界。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！