HTML和CSS原生不支持对角线平铺，需用伪元素旋转背景图或repeating-linear-gradient模拟；前者依赖transform与多层背景，后者更轻量但需兼容性处理。
HTML 本身不支持对角线平铺
直接写 <body background="..."> 或仅用 CSS 的 background-repeat 无法实现对角线平铺——浏览器原生只支持 repeat、repeat-x、repeat-y、no-repeat 四种模式，没有 repeat-diagonal 这类值。
CSS 中用 background-image 模拟对角线平铺
真正可行的做法是用多层背景 + background-position 偏移 + 小图旋转拼接，核心是把一张小图复制两次：一次原方向，一次顺时针旋转 45°，再错位叠加。
- 准备一张边缘无缝的正方形小图（如
dot.png，16×16 像素） - 用
background: url('dot.png') repeat, url('dot.png') repeat;定义双层背景 - 第二层加
transform: rotate(45deg)—— 但注意：transform不能直接作用于 background，所以得套一层伪元素或额外容器 - 更稳妥的方案：用
::before伪元素覆盖在目标容器上，设background-image并transform: rotate(45deg)，再设background-repeat: repeat
示例（作用于 <body>）：
body {
position: relative;
min-height: 100vh;
margin: 0;
}
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('dot.png');
background-repeat: repeat;
transform: rotate(45deg);
z-index: -1;
}
用 CSS conic-gradient 替代图片实现“伪对角线纹理”
如果只是要视觉上的斜线/网格感，不用真实图片，conic-gradient 或 repeating-linear-gradient 更轻量、可缩放、无加载延迟。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
repeating-linear-gradient可生成平行斜线：background: repeating-linear-gradient(45deg, #000, #000 2px, transparent 2px, transparent 4px); - 角度写成
45deg或-45deg控制方向，像素值控制线宽与间距 - 这种方案完全基于 CSS，无路径依赖、无尺寸限制、高清缩放不失真
- 若需更复杂图案（如菱形点阵），可用两组
repeating-linear-gradient叠加
容易被忽略的兼容性与性能点
伪元素旋转方案在 Safari 旧版本中可能触发重绘卡顿；conic-gradient 在 Safari ≤15.4 和 Android WebView 中不支持——需加降级 fallback。
- 检查目标环境是否支持
conic-gradient，否则回退到单方向平铺 +background-size: 20px 20px模拟密度 - 旋转伪元素必须设
z-index: -1，否则会遮挡页面内容 - 所有方案都依赖容器有明确尺寸，
body必须配min-height: 100vh和margin: 0，否则背景区域塌陷不可见 - 对角线效果越密，渲染压力越大；移动端慎用高密度
repeat+transform组合
真正难的不是写几行 CSS，而是确认设计意图是否真需要“物理对角线平铺”——多数时候，斜向渐变或错位网格已足够，且更可控。
