如何在单行中设置反渐变

Question

我已经解决了对角渐变的类似问题。现在线性很难了。

我能够创建带十字的渐变

background: linear-gradient(to right, transparent 40%,#f00 50%,transparent 60%), 
            linear-gradient(to bottom, #fff 20%,#f00 50%,#fff 80%);

我无法创建左半部分为底部 WHITE-RED 的渐变，右半部分为 RED-WHITE 的反渐变。

以下是我尝试创建它的方式：

background: linear-gradient(to bottom, transparent 50%,#ff0 100%), 
            linear-gradient(to right, transparent 50%,#f00 100%);

但是黄色部分已经满了！我该如何解决这种情况？

这就是我想要的：

Answer 1

编辑：可以使用一个 background，参见。

~~在您的元素上使用单个 background 规则不可能直接实现，但是~~ 您可以利用 ::before 和 ::after 伪元素.

div {
  width: 100%;
  height: 50px;
  border: 1px solid black;
  position: relative;
  background: linear-gradient(to bottom, red 0%, #ff0 100%);
}
div::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to top, red 0%, #ff0 100%);
}

<div></div>

Answer 2

很有可能使用单个元素和单个背景规则来实现这一点。只需在 X-axis 中为每个渐变提供容器大小的 50%，使用 background-position 将一个渐变放置在左侧，将另一个渐变放置在右侧，并通过设置值来阻止渐变重复background-repeat 作为 no-repeat.

div {
  height: 100px;
  background: linear-gradient(to top, red 10%, yellow 50%), linear-gradient(to bottom, red 10%, yellow 50%);
  /* background-size: 50% 100%; Ideally this should be enough but it leaves a white line in the middle in snippet for some reason and so use below setting */
  background-size: 50% 100%, calc(50% + 1px) 100%;
  background-position: 0% 0%, 100% 0%;
  background-repeat: no-repeat;
}

<div></div>

如何在单行中设置反渐变

How to set inverse gradient in a single row

html

css

gradient

linear-gradients