創建相交線性漸變

Question

我知道我可以將線性漸變作爲div元素的背景。但是有可能做出相交的線條漸變？見下圖：

Answer 1

是的，很有可能通過使用兩張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>

Answer 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/