创建相交线性渐变答案

【问题标题】：Create an Intersecting Linear Gradient创建相交线性渐变
【发布时间】：2016-07-01 01:15:33
【问题描述】：

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

【问题讨论】：

如果你有两个带有线性渐变的 div，旋转 div 然后改变它的不透明度怎么办？

标签： css line gradient linear-gradients

【解决方案1】：

是的，很可能通过使用两个linear-gradient 图像来创建这样的模式。当为一个元素分配多个背景图像时，UA 默认将它们设置为图层，其中右起第一个为最下层，右起最后一个为最上层。

以下是两种模式的示例 sn-p。

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

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>

【讨论】：

感谢哈利的完美回答。

【解决方案2】：

不确定这是不是你想要的：

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/

【讨论】：