在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)

他们看起来像这样＆＃34;

我坚持下一步应该做的事情 - 我需要有上述两种组合的细胞。所以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>