교차 선형 그라데이션 만들기

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/