如何制作对角 css 渐变而不将颜色混合在一起（急剧的颜色变化），向右移动 70%？

Question

我找不到任何 css 渐变颜色生成器可以完成我想要做的事情。 没有混合的对角渐变，只是从

#252525

到

#0099ff

（例如）的急剧颜色变化，两种颜色相交的线距容器左侧约 70%，因此该线将开始略高于容器 x 轴的一半，并且该线可能会在容器右侧 y 轴的一半处结束。

如果您能够强调哪些数字专门用于计算倾斜度以及渐变开始的 x y 坐标，那将非常有帮助。我现在很困惑。

Answer 1

可以使用线性渐变属性来创建具有特定颜色停止点的对角渐变并在 CSS 中定位。在您的情况下，您需要从 #252525 到 #0099ff 的对角渐变，并具有急剧的过渡，从左侧约 70% 开始，到右侧中途结束。以下是实现这一目标的方法：

background: linear-gradient(to bottom right, #252525 70%, #0099ff 70%);

在此示例中：

tobottomright 将渐变方向设置为从左上角到右下角，创建对角渐变。 #252525 是起始颜色。 #0099ff 是结束颜色。 70% 表示两种颜色之间的过渡将发生在容器宽度的 70% 处。 这是更详细的细分：

从左上角开始应用第一种颜色（#252525）。 第二种颜色 (#0099ff) 从容器宽度的 70% 开始应用，一直到右下角。