创建相交的线性渐变

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 默认将它们设置为图层，从右数第一个为最下层，从右数最后一个为最上层。

下面是两种模式的示例片段。

(注意：在斜线模式中，我设置了不同的颜色停止点以避免锯齿线。斜线渐变总是倾向于制作它们。)

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;
}

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

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

创建相交的线性渐变

Create an Intersecting Linear Gradient

css

line

gradient

linear-gradients