最稳妥方式是用 background-image 配合 linear-gradient(135deg, #000 50%, transparent 50%)，设 background-size: 2px 2px 并 repeat；135deg 对应左上→右下，50% 实现锐利边缘，background-size 控制线宽与密度，需避半像素渲染以保清晰。
用 background-image 实现对角线按钮背景
直接给按钮加一条从左上到右下的对角线，最稳妥的方式不是画 SVG 或绝对定位伪元素，而是用 background-image 配合线性渐变——它天然支持斜向线条，且兼容性好（IE10+）、无需额外 DOM。
关键在于把渐变的色带做窄，其余部分透明：
button {
background-image: linear-gradient(135deg, #000 50%, transparent 50%);
background-size: 2px 2px; /* 控制线宽和密度 */
background-repeat: repeat;
}这里 135deg 对应左上→右下方向；50% 是颜色突变点，形成锐利边缘；background-size 决定线条粗细和间距——调小 2px 值能让线更细，但太小（如 1px）在高 DPI 屏幕可能糊或消失。
linear-gradient 的角度和颜色组合怎么选
角度不是随便写的：45deg 是右上→左下，135deg 才是左上→右下；若要右上→左下，就用 -45deg 或 315deg。颜色顺序决定线在哪一侧：前半段色是线，后半段透明是底。
立即学习“前端免费学习笔记（深入）”；
- 单色实线：
linear-gradient(135deg, #666 50%, transparent 50%) - 双色分界线（比如按钮分割）：
linear-gradient(135deg, #f00 49%, #00f 51%)，中间留 1% 过渡避免硬边锯齿 - 想让线居中不重复？改用
background-size: 100% 100%+background-position: center，但此时需确保容器宽高比固定，否则线会拉伸变形
按钮文字被盖住？background-clip 和 z-index 不管用
文字被渐变线遮挡，不是层叠问题，而是背景绘制层级默认覆盖文字内容。解决方法只有两个：
- 用
background-clip: padding-box（默认值），确保背景只画在内边距区，不侵入文字区域；但更可靠的是—— - 把线条做成伪元素：
::before绝对定位画线，按钮本体保持纯色背景，这样文字完全不受影响 - 或者反向操作：用
text-shadow模拟“线穿文字”，但仅适合浅色文字+深色线，且控制精度低
别碰 z-index——伪元素和文字都在同一 stacking context，z-index 对非定位元素无效。
移动端缩放时线条模糊？像素对齐没做
线性渐变线条在缩放或 DPR > 1 的设备上发虚，本质是 CSS 像素和物理像素没对齐。解决方案不是加 transform: scale()，而是：
- 把
background-size设为偶数像素（如2px、4px），避开半像素渲染 - 配合
image-rendering: pixelated（仅 Chrome/Firefox 支持，Safari 忽略） - 更彻底：用
@media (-webkit-min-device-pixel-ratio: 2)单独设background-size: 1px 1px，让高 DPR 下线条密度翻倍
真正难搞的是按钮圆角 + 对角线共存——渐变线会在圆角处被裁切，视觉上断开。这时要么放弃圆角，要么改用 SVG <line> 手动适配，没有通用 CSS 解法。
