介绍
在CSS中设置对角线是比较简单的。通过transform: rotate()和一些CSS技巧，可以轻松地创建不同样式的斜线。本文将在CSS 3中介绍三种简单的方法来设置一个元素的对角线。
方法一：使用skew()
这是最常见的技术，可以通过transform: skew()方法创建斜线。
步骤：
1. 创建一个元素，例如 div 或 span。
2. 通过 CSS 选择器选中该元素，并添加 transform: skew(), transform-origin: 0 或 100% 和一些其他样式来制作该斜线。
3. 最后，这个元素的文本或内容可以在斜线上方或下方放置。
.line {
display: inline-block;
position: relative;
padding: 5px 15px;
color: #fff;
font-size: 24px;
font-weight: bold;
text-shadow: 2px 2px #000;
background-color: #1e8bc3;
transform-origin: 0;
transform: skew(-20deg);
}
.line:after {
content: '';
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 15px solid #1e8bc3;
}
上述代码会品出下面的内容：
注释：
要创建斜线，可以使用两个 div 元素。 第一个元素是具有斜体旋转的文本。另一个元素是该元素的伪元素，该元素有三个可见边框和一个透明的边框，这样它就成为一个具有斜角的箭头。该元素必须放在文本的下面。
方法二:使用background和linear-gradient
这种方法使用了 CSS 的背景和线性渐变，具有更好的浏览器支持。
步骤：
1. 创建一个元素，例如 div 或 span。
2. 设置元素的宽度、高度、背景颜色和渐变背景。
3. 使用 before 或 after 伪元素来创建一个大小将会覆盖整个元素的斜线图片。
.bg-gradient {
width: 80%;
height: 150px;
margin: 50px auto;
background-color: #1e8bc3;
background: linear-gradient(-45deg, #1e8bc3 0%, #1c4e9e 100%);
position: relative;
}
.bg-gradient:before {
content: "";
display: block;
position: absolute;
top: -50px;
left: 0;
border-top: 100px solid #1e8bc3;
border-right: 100px solid transparent;
}
上述代码会产生下面内容：
注释：
在这个例子中，我们使用线性渐变，一个宽度为 80%，高度为 150 像素的 div 元素背景被设置为对角线。之后，使用 before 伪元素，来生成一个实心三角形，该元素的宽度和高度是通过像素单位设置的。
方法三：使用SVG
SVG 是一种通用的矢量图形格式，可用于在 Web 中呈现图形。 可以使用这个格式来创建不同类型的线条和形状。 在这个例子中，我们将使用 SVG 来创建一个对角线。
步骤：
1. 在 HTML 中创建一个 SVG 元素。
2. 设置 SVG 元素的宽度、高度、显示文本和对角线路径。
3. 最后，SVG 元素可以在一个包含它的容器中进行居中和样式处理。
.svg-container {
width: 60%;
height: 200px;
margin: 50px auto;
display: flex;
justify-content: center;
align-items: center;
}
svg {
width: 100px;
height: 100px;
fill: #1e8bc3;
}
path {
stroke-width: 5;
stroke: #fff;
}
<div class="svg-container">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<text x="50" y="50" text-anchor="middle" alignment-baseline="central">斜线</text>
<path d="M 0 0 L 100 100" />
</svg>
</div>
上述代码会产生下面内容：
注释：
在这个例子中，我们创建了一个 SVG 图像，它包含一个像素路径和一些文本。 path 元素是一个指定线条的元素。 该路径的坐标是“M 0 0”和“L 100 100”，这表示线条从左上角延伸到右下角。 显示文本的 Text 元素设置了坐标和对齐方式。
总结
在 CSS 中设置对角线有很多不同的方法。 每种方法都利用了不同的样式，例如 transform、背景渐变或 SVG。 取决于您的目的和所需的样式，您可以选择合适的方法。