交差リニアグラデーションを作成する

Question

div要素のバックグラウンドとして直線勾配を作ることができます。しかし、交差する線勾配を作ることは可能ですか？下の画像を参照してください。これはあなたが何であるかである場合

Answer 1

はい、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>

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/