CSS中具有線性漸變和重復線性漸變的背景

Question

我的Web應用程序上有一個類似於調度程序的組件，其中包含許多div。 這些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>