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>