Создайте пересекающийся линейный градиент

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/