如何使用 CSS 创建对角线

我们访问的许多网站都将元素放置在矩形框中。您不必费力在网页上制作矩形形状。border-radius使用该属性创建圆形也相对容易。

在本教程中，您将学习如何借助不同的 css 属性创建非矩形对角线或元素。请注意，我们这里的重点是元素的外观，而不是元素内部或周围的内容流。

• 1、使用渐变通过 CSS 创建对角线

• 2、使用变换创建带对角线的线

• 3、使用 clip-path 属性创建对角线（附示例）

• 4、您应该在 CSS 中为线条使用哪种技术？

• 最后的想法

1、使用渐变通过 CSS 创建对角线

使用 CSS 创建渐变和对角线一直是设计师的永恒趋势。它允许您在您指定的方向上创建从一种颜色到另一种颜色的过渡。您可以在所有可以使用图像元素的地方使用渐变。渐变可以是线性的、径向的或圆锥形的。对于我们的情况，我们只需要线性渐变。

linear-gradient使用 CSS，您可以使用接受多个参数的 CSS 函数来制作对角线和渐变。第一个可选参数确定梯度流动的方向。您可以完全跳过它并开始为渐变指定颜色。如果未指定，渐变将从上到下运行。

background: linear-gradient(black, white);

因为我们希望渐变从左到右，所以我们将角度设置为 90 度。

background: linear-gradient(90deg, black, white);

您还可以传递每种颜色的停止值。停止值决定了沿渐变方向移动时特定位置的颜色。您可以在相同的停止值处创建具有两种不同颜色的线性渐变。这将创建一个突然的颜色变化，而不是逐渐过渡。

background: linear-gradient(90deg, black 11ch, white 11ch);

上面的 CSS 规则指出渐变的颜色将从左到右的方向流动，并且在 11ch 距离的左侧为完全黑色，在11ch距离的右侧为白色。

在这一点上，我们回到了我们的矩形框。然而，现在很容易在 CSS 对角线或背景中创建，只需将渐变的角度更改为其他值，如70deg或120deg，具体取决于您希望对角线倾斜的方向。

您还可以将白色的停止值增加到稍大的值，如11.05ch，以避免任何锯齿状边缘。

background: linear-gradient(70deg, black 11ch, white 11.05ch);

See the Pen  Diagonal Lines with Gradients by Nitish (@9itish)  on CodePen.

使用变换创建带对角线的线

您可以结合使用伪元素和转换来在 CSS 中创建对角线。我们将从一个position设置为的简单标题开始relative。这有助于我们相对于标题本身定位伪元素。标题的宽度设置为fit-content使其不会过度延伸。下面是在纯 CSS 中创建对角线的示例：

h1.pseudo-element {
  width: fit-content;  position: relative;
}

现在使用以下 CSS 创建一个倾斜的::after伪元素。

h1.pseudo-element::after {    
content: "";    
width: 50px;    
height: 100%;    
position: absolute;    
right: -20px;    
top: 0;    
background: black;    
z-index: -1;    
transform: skew(25deg);
}

该content属性的值设置为空字符串，因为我们实际上不想显示任何内容。您为伪元素设置的宽度将取决于您希望倾斜的宽度。高度设置为100%以覆盖标题的整个高度。

将该top属性设置为0会将伪元素与我们标题的顶部对齐。属性的负值right然后将其移动到标题的右边缘之外。负值z-index确保伪元素呈现在主标题下。

伪元素中的倾斜度由transform属性提供。在我们的例子中，我们将值设置为25degskew()。这将控制倾斜的方向和数量。

你们中的一些人可能想知道为什么我不简单地将倾斜变换应用于主标题以创建倾斜的背景。原因是在主标题上使用倾斜也会使文本内容倾斜。从下面的嵌入式 CodePen 可以看出这一点。

See the Pen  Diagonal Lines with Transforms by Nitish (@9itish)  on CodePen.

使用clip-path属性创建对角线（附示例）

我现在将向您展示另一种在 CSS 中创建对角线的方法。此方法依赖于 CSSclip-path属性。您可以使用 CSSclip-path属性为任何元素定义剪辑区域。位于您指定的剪辑区域之外的任何内容对查看者都是不可见的。只有落在指定剪辑路径内的元素区域才可见。

该属性可以采用很多有效值，您可以在MDN 文档中阅读相关内容。然而，我们只对使用基本的多边形定义裁剪区域感兴趣。多边形形状是使用polygon()函数定义的，该函数采用三对或更多对值来指定多边形相对于参考框的坐标。

手动计算裁剪多边形的不同对的值是一个容易出错且累人的过程。您可以使用 Bennet Feely 开发的名为CSS clip-path maker的出色工具来确定所有多边形坐标的值。该函数最终会创建一个封闭的多边形来确定元素的可见区域。

您可以在 CSS 中使用以下对角线示例来创建简单的对角线背景线：

h1.simple-clip {
  width: fit-content;
  padding-right: 50px;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
}

将width属性的值设置为fit-content确保 CSS 对角线背景不会扩展到容器的整个宽度。该padding-right属性用于在标题的右侧提供一些额外的空间，这样实际的文本内容就不会因为该clip-path属性而被截断。属性中的第二个值对clip-path确定标题实际被裁剪的距离。在这种情况下它是右上角的位置。

该属性的一大优势clip-path是您不局限于元素的简单对角线剪辑。您可以根据需要定义剪辑区域。这是另一个示例，它创建了一个稍微复杂的标题剪辑。

h1.complex-clip {
  width: fit-content;
  padding-top: 20px;
  padding-right: 50px;
  clip-path: polygon(0 20%, 90% 0, 100% 100%, 0% 100%);
}

这一次，我还在顶部添加了一些额外的填充以补偿剪裁。

See the Pen  Diagonal Lines with clip-path by Nitish (@9itish)  on CodePen.

您应该在 CSS 中为线条使用哪种技术？

我们已经讨论了使用 CSS 创建对角线的三种不同方法。我相信你可以用更多的方法达到同样的效果。在您自己的项目中使用 CSS 中的对角线技术取决于您的目标。

如果您的首要任务是浏览器支持，您应该考虑使用变换或渐变。这并不意味着它clip-path没有得到广泛支持。事实上，大约 90% 的没有浏览器前缀的浏览器clip-path都支持该属性。只是线性渐变得到了更广泛的支持。

如果内容长度是可变的，并且您不想在 CSS 中来回调整不同的属性值以获得正确的倾斜角度或避免内容裁剪，您应该考虑使用带有伪元素的转换。在这种情况下，元素宽度将由内容决定，并且没有裁剪的风险。伪元素会为你创建倾斜。

如果您想将伪元素用于其他用途怎么办？在这种情况下，您的选择是使用渐变或clip-path属性。这是因为每种类型只允许有一个伪元素。

如果你想为你的元素创建一些复杂的背景形状怎么办？那么最好的选择是使用该clip-path属性。虽然您可以使用渐变和变换来模拟一些复杂的形状，但简单地使用clip-path. 只需确保您相应地填充内容，这样它就不会被剪裁。

最后的想法

我希望您能够使用其中一种技术在您自己的项目中创建对角线。作为练习，尝试自己想出另一种创建这些对角线的方法。您还应该考虑收藏老吴搭建教程，以进一步提高您的技能。