CSS Grid原生不支持斜线分割，可行方案仅有伪元素叠加或linear-gradient背景渐变；前者适合交互与动态控制，后者更轻量稳定，兼容IE11+，但需注意角度、停靠点、background-size及响应式校准。
Grid本身不支持直接画斜线，得靠伪元素或背景图
CSS Grid 是二维布局工具，擅长处理行列对齐、区域划分，但原生没有“斜线分割”这个能力。所谓“斜线划分布局”，实际是视觉效果——要么用 ::before/::after 伪元素画三角形/梯形盖在 Grid 单元格上，要么用 background-image: linear-gradient() 在容器里拉一条斜线。
常见错误现象：grid-template-areas 里写 "a b / c d" 想让分隔线倾斜？没用，Grid 区域永远是矩形；用 transform: rotate() 转整个单元格？会破坏网格流、影响子元素定位，且响应式下极易错位。
- 真正可行路径只有两条：伪元素叠加 或 渐变背景
- 伪元素适合需要交互（如 hover 高亮斜线）或动态控制斜率的场景
- 渐变背景更轻量，适合静态分隔，但斜率调整依赖角度值，
45deg不一定等于像素级精准对角
用 background-image + linear-gradient 实现可控斜线分隔
这是最稳定、兼容性最好（IE11+）、也最容易调试的方式。关键是把斜线当作容器的背景，而不是试图“切开”Grid 区域。
使用场景：两栏内容需沿对角线过渡（如左上浅色 / 右下深色），或中间一道细斜线将 Grid 划为两个视觉区块。
立即学习“前端免费学习笔记（深入）”；
参数差异重点在角度和颜色停靠点：
-
linear-gradient(135deg, #fff 50%, transparent 50%)：从左上到右下斜线，50% 处硬切，线宽为 1px（因两侧颜色突变） - 想加粗斜线？改用
linear-gradient(135deg, #fff 49%, #000 49%, #000 51%, transparent 51%) - 斜线位置偏移？配合
background-position，比如background-position: 20px 30px - 注意：Grid 容器需设
background-clip: padding-box防止斜线溢出边框
section {
display: grid;
grid-template-columns: 1fr 1fr;
background: linear-gradient(135deg, #f0f0f0 49%, #333 49%, #333 51%, #f0f0f0 51%);
background-size: 20px 20px;
}
用伪元素 + clip-path 做精确斜角覆盖（现代方案）
当需要斜线带阴影、hover 动画、或与内容有复杂叠层关系时，伪元素更灵活。核心是用 clip-path 切出三角形，再旋转/定位覆盖 Grid 单元格交界处。
容易踩的坑：
-
clip-path: polygon()坐标基于元素自身盒模型，不是视口，所以必须确保父容器有明确position: relative - 在 Grid 子项上加伪元素，要小心
z-index层级——Grid 的z-index行为和普通流不同，建议统一用position: relative+z-index控制 - IE 完全不支持
clip-path，如需兼容，降级为 SVG<clipPath>或直接放弃斜角 - 性能提示：频繁动画
clip-path在低端设备可能掉帧，优先用transform动画替代
.grid-cell::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 100px; height: 100px;
background: #000;
clip-path: polygon(0 0, 100% 0, 100% 100%);
z-index: 1;
}
Grid 与斜线共存时，响应式断点要重算 clip-path 或渐变尺寸
斜线视觉是否“对齐”，高度依赖容器宽高比。Grid 列数变化、窗口缩放、字体缩放都可能让原本 45° 的斜线看起来歪了。
这不是 Grid 的问题，而是斜线渲染依赖物理像素比例。解决思路很实在：
- 渐变方案：用
background-size: 20px 20px这类固定尺寸，比用百分比更可控；必要时用@media重设background-size和角度 - 伪元素方案：用
vmin单位定义clip-path坐标，例如polygon(0 0, 100vmin 0, 100vmin 100vmin)，能随视口等比缩放 - 绝对别用
vw/vh直接写死坐标——滚动时视口尺寸微变，斜线会抖 - 真要像素级对齐？只能上 JS 监听
resize，动态计算并设置style.clipPath，但绝大多数项目不值得
斜线越细、角度越接近 45° 或 135°，对尺寸精度越敏感。别指望一次写完就一劳永逸，它本质是个视觉校准活儿。
