[CSS] 用linear-gradient()在block中画一条对角线[diagonal line]

介绍

工作一段时间以来第一次写了一些繁重的 CSS~~我以为你不喜欢~~
记录是因为我跌跌撞撞并试图猜测我从未使用过的风格。

你想要什么

一个不好的例子。

我想做一个相对简单的实现，为特定块绘制对角线，嗯，我累了。
我不关心如何添加get类的类似JS的故事，所以这次我忽略了它。

这一次，我在 get 类命中 p 标签的元素上画了一条对角线。

.get::before {
  position: absolute;
  content: "";
  display: block;
  background-color: rgba(204, 204, 204, 0.5);
  height: 1px;
  width: 160px;
  top: 1.7rem;
  right: -0.4rem;
  transform: rotate(-20deg);
}

之前使用伪元素，对p标签应用position: relative;，使用position: absolute;或top right调整位置。
transform: rotate(-20deg) 对角线，width 线长...花费大量时间和精力我能够做到以上。
如果仔细观察，左下角的顶点没有正确接触角。
如果您尝试正确地进行操作，则需要使用勾股定理和其他计算。~~你能那样做吗~~

在这一点上，这是一个非常令人失望的实现，但还有一个非常大的问题。
那是，块大小更改时折叠这就是它的意思。

上面的 CSS 实现是基于 p 标签的大小为width: 210px; height: 52.5px;（为此）的假设。
例如，告别width: 250px;。
或者有没有一种情况，你要画对角线的块的大小是可变的，比如%指定，rem指定，或者响应式对应？~~我不再想要它了~~

更改块大小后崩溃的示例

这一次，块大小是可变的，所以我想画一条对角线，这样它就不会依赖于特定的大小。
那时，我遇到线性梯度是。

线性梯度

取自 MDN

linear-gradient() 是一个 CSS 函数，它生成由两种或多种颜色组成的图像，这些颜色沿着连续的线变化。结果是数据类型 <gradient> 的对象，它是 <image> 的子类型。

CSS 数据类型但是已经？ ? ?所以只是分解它。

图像类型
表示二维图像的数据类型。是常见的background-image: url("/hoge/fuga.png");的url()等可以表示的数据类型。

渐变型
图像类型的一种特殊类型，它是由两个或多个连续颜色变化组成的图像。（那是因为它是一个渐变）

所以，线性梯度是代表这种梯度类型图像的函数之一。
因为它是线性的直线将表达渐变。
还有径向渐变的radial-gradient()和扇形的conic-gradient()。

由于它是一个返回 <image> 类型的函数，因此它只能用于需要 <image> 类型的样式，例如background-image。 background-color 不好。

表达两种或多种颜色的渐变既然是CSS，那就是斜线……？然而，当谈到 CSS 中的“颜色”时，就是那个人。 transparent 它是透明的。

使用线性梯度修复一个不好的例子
.get {
  background-image: linear-gradient(to left top, transparent 50%, rgba(204, 204, 204, 0.5) 50%,
rgba(204, 204, 204, 0.5) calc(50% + 1px), transparent calc(50% + 1px));
}
删除前一个坏例子中使用的伪元素之前的整个。
相反，我们直接 background-image: lineat-gradient(...) 到 get 类。
有了这个，即使你改变了块的尺寸，对角线也将作为对角线工作。

即使块的尺寸发生变化，对角线也能正常工作的示例

并且您可以仅使用 CSS 轻松绘制对角线！这就是所有的介绍。
如果，我想用简单的 CSS 在块中画一条对角线如果您是出于此目的来到这里，建议您将浏览器移回或参考此处的链接。

我不确定这个功能是做什么的！我喜欢CSS的神秘语法！对罕见的人（我是）的评论。
MDN上的解释是~~他妈的~~既然难杀初学者，我就抽出CSS规范研究一下。

线性梯度（）的语法

linear-gradient() = linear-gradient([<angle> | to <side-or-corner>]? , <color-stop-list>)

<> 表示 CSS 数据类型。
[] 是一个群组。在上面的例子中，<angle> 和to <side-or-corner> 有一个组的含义（你要声明的内容是一样的）。
| 就像或。
|| 是或，但这意味着至少需要被此分隔的两侧之一。
? 表示前面是否有类型或短语无关紧要。

第一个参数 [<angle> | to <side-or-corner>]？
决定如何处理渐变轴。
在<angle>的情况下，表示为90度或270度等角度。
在to <side-or-corner>的情况下是<side-or-corner> = [ [left | right] || [top | bottom] ]，所以
您可以使用to left top，如本例所示，或to top 或to right。
如果您没有在此参数中添加任何内容，则默认为 (180deg = to bottom)。
当轴确定时，对于那个块梯度轴及其起点 最后一站决心，决意，决定。

在第二个参数 <color-stop-list> 之后
我将向您展示渐变颜色（至少 2 种）及其范围。
<color-stop-list> = <linear-color-stop> , [<linear-color-hint>? , <linear-color-stop>]#
<linear-color-stop> = <color> && <length-percentage>?
<linear-color-hint> = <length-percentage>
<length-percentage> = [length | percentage]

# 表示前面的形式或短语被使用了一次或多次。~~它充满了咒语，我开始讨厌它。~~

让我们从无处不在的<linear-color-stop> = <color> && <length-percentage>? 开始。
例如，transparent 50% 和 rgba(204, 204, 204, 0.5) 50%。

<color> 很好，问题是<length-percentage>。
这将确定从上图的起点开始向下一个颜色渐变的位置。

分解这个例子，
第一和第二transparent 50%, rgba(204, 204, 204, 0.5) 50%
→ 由于相同的 50% 点是起点，因此不会出现渐变。
第三和第四rgba(204, 204, 204, 0.5) calc(50% + 1px), transparent calc(50% + 1px)
→ 同 1 和 2，同样的calc(50% + 1px) 是起点，所以不会出现渐变。
顺便说一句，calc(50% + 1px) 是无论块大小因为我总是想要一条 1px 的线。

所以第二个和第三个rgba(204, 204, 204, 0.5) 50%, rgba(204, 204, 204, 0.5) calc(50% + 1px)
换句话说，rgba(204, 204, 204, 0.5) 线是在calc(50% +1px) 范围内绘制的。

如果只是字母呢？ ? ?我认为有很多人（我），所以我会放很多我尝试过的东西。

各种渐变

1.无渐变
.twotone {
  border: none !important;
  background-image: linear-gradient(to left top, red 50%, lightblue 50%);
}
通过使两种颜色的起点相同，两种颜色在没有渐变的情况下表现一半。

2.适当的渐变
.two-gradient {
  border: none !important;
  background-image: linear-gradient(to left top, red 20%, yellow 80%);
}
红色从起点到 0-20% 点，黄色从起点到 80% 到 100%。介于两者之间（20% 到 80%）以红色和黄色渐变表示。

3.尝试改变渐变的比例（强度？）
.two-gradient-yellow {
  border: none !important;
  background-image: linear-gradient(to left top, red 20%, 30%, yellow 80%);
}
~~我真的不知道为什么~~如果您删除颜色并仅添加百分比，则渐变将发生变化。
示例 2 似乎与 linear-gradient(to left top, red 20%, 50%, yellow 80%) 同义。

4.尝试了多色和<angle>
.three-gradient {
  border: none !important;
  background-image: linear-gradient(to left top, red, lightblue, green);
}

.deg-gradient {
  border: none !important;
  background-image: linear-gradient(75deg, red, orange, yellow, green);
}
如果你不使用 <length-percentage>，它会根据 CSS 端的计算给你一个很好的渐变。
~~我没有精力去解读这个逻辑~~
最后一个.deg-gradient与其他的不同，因为它指定了一个角度，所以渐变的轴是不同的。

在最后

~~我真的很讨厌 CSS~~
我只是轻轻地接触过 CSS，所以我很高兴这次能够深入挖掘。
尽管这是一个巧合，但linear-gradient 是一个函数可能是一个很大的因素。
这是我第一次看到CSS规范，但它很有趣，所以如果你想掌握CSS，请阅读它！

参考链接

~~可能是反的~~MDN 上的评论文章
https://developer.mozilla.org/ja/docs/Web/CSS/gradient

CSS 规范
https://w3c.github.io/csswg-drafts/css-images-3/

一篇文章告诉你可以用 linear-gradient 写一条对角线
https://csshtml.work/diagonal-line/

我们的前端工程师@ibetaku 的关于用线性渐变做时尚事情的文章（真的很时尚）
https://qiita.com/ibetaku/items/c357739ab9c86c370e24

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308626333.html