css如何制作斜线
使用 CSS 制作斜线的方法
使用 linear-gradient 背景渐变
通过 CSS 的 background 属性结合 linear-gradient 可以创建斜线效果。调整角度参数（如 45deg）可改变斜线方向。
.diagonal-line {
background: linear-gradient(45deg, transparent 49%, #000 50%, transparent 51%);
height: 2px;
width: 100%;
}使用伪元素和 transform
通过伪元素（::before 或 ::after）结合 transform: rotate() 实现斜线。适用于需要精确控制斜线位置和尺寸的场景。
.element::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #000;
transform: rotate(30deg);
transform-origin: left center;
}使用 SVG 内联
通过内联 SVG 的 <line> 元素绘制斜线，适合复杂路径或需要动态控制的场景。
<div class="svg-container">
<svg width="100%" height="100%">
<line x1="0" y1="0" x2="100%" y2="100%" stroke="#000" stroke-width="1" />
</svg>
</div>使用边框和旋转
通过组合元素的边框和旋转，创建对角线效果。例如，利用零宽高的元素和边框生成斜线。
.diagonal-border {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-bottom: 100px solid #000;
transform: rotate(45deg);
}选择建议
- 简单斜线：优先使用
linear-gradient，代码简洁且易于调整角度。 - 精确控制：伪元素 +
transform适合需要定位的场景。 - 复杂路径：SVG 提供更灵活的路径绘制能力。
- 边框斜线：适用于特定形状（如三角形）的斜切效果。
