リニアグラジエントとリピートリニアグラジエントを使用したCSSの背景

Question

多くのdivで構成されるWebアプリケーション上にスケジューラのようなコンポーネントがあります。これらのdivの一部は完全に赤色でも、一部は完全に白色でも、半透明の半白色でも、一部は赤色に縞模様にすることもできます。

半分赤半分白いものは、CSSでこのような背景を持っている：

background: linear-gradient(169deg, rgba(240,91,38,0.30) 49%, rgb(255, 255, 255) 51%); 

そして、彼らは次のようになります。

ストライピングされているものは、このCSSコードを持っている：

background: repeating-linear-gradient(45deg, #ffd6cc, #ffd6cc 10px, #ffffff 10px, #ffffff 20px) 

そして彼らは、この「

のように見えます

私は次に何をすべきかに固執しています - 私は上記の両方の組み合わせである細胞を持つ必要があります。したがってdivは最初のイメージのようにする必要がありますが、上の三角形全体が赤く塗られているのではなく、三角形がストライプされている必要があります。 cssでこれを行う方法はありますか？

Answer 1

あなたは、ああ...私はあなたがそこに何をしたか見背景ごとに複数のグラデーション

.half-cell { 
 
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.0) 49%, rgb(255, 255, 255) 51%), repeating-linear-gradient(45deg, #ffd6cc, #ffd6cc 10px, #ffffff 10px, #ffffff 20px); 
 
} 
 

 
div { 
 
    width: 606px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
}

<div class="half-cell"></div>