创建相交线性渐变

Question

我知道我可以将线性渐变作为div元素的背景。但是可以制作相交的线渐变吗？见下图：

Answer 1

不确定这是否属于您的目标：

HTML

<div id="red2blue"></div>
<div id="blue2red"></div>

CSS

div{
  width:100px;
  height:100px;
  opacity: 0.5;
  position:absolute;
  top:0;
  left:0;
}
#red2blue{
  background: linear-gradient( 45deg, red, blue );
}

#blue2red{
  background: linear-gradient( -45deg, blue, red );
}

https://jsfiddle.net/9na275fn/

Answer 2

是的，通过使用两个linear-gradient图像来创建此类模式是非常有可能的。当为一个元素分配多个背景图像时，默认情况下UA会将它们设置为图层，其中右边的第一个是最下层，右边的最后一个是最上层。

以下是两种模式的示例摘录。

（ 注意： 在有角度的线条图案中，我设置了不同的颜色停止点，以避免出现锯齿状线条。角度线性渐变总是如此倾向于生产它们。）

＆＃13;

＆＃13;

div {
  height: 200px;
  width: 200px;
  margin: 10px;
  border: 1px solid;
}
.checkered {
  background: linear-gradient(to right, black 1px, transparent 1px), linear-gradient(to bottom, black 1px, transparent 1px);
  background-size: 10px 10px;
  background-position: 5px 0px, 0px 5px;
}
.angled {
  background: linear-gradient(45deg, transparent 7px, black 7px, transparent 8px), linear-gradient(315deg, transparent 7px, black 7px, transparent 8px);
  background-size: 10px 10px;
}

＆＃13;

<div class='checkered'></div>

<div class='angled'></div>

＆＃13;

＆＃13;

＆＃13;