CSS表格单元格背景图像样式（两个三角形）

Question

我有一个表格，我想根据动态值设置单元格的样式。我需要完成这样的事情：

所以有细胞分裂两种颜色，其他颜色分别为纯色，另一种颜色为纯色，但其上有图案，另一种只有边框（红色）。

因此每个元素都是<td> HTML标记

我正在考虑创建图像，然后将其设置为背景，但我想知道是否有一种简单的CSS方法可以做到。

有什么建议吗？

Answer 1

以下是您的回答：DivWithGradientColor

以下是表格示例：Table cell withtwo-colors

HTML

---

    <div>
</div>

CSS

---

 div{
        border:1px solid black;
        background: linear-gradient(-45deg,blue 50%, red 50%);
        height:100px;
        width:100px;
    }

Answer 2

不确定。使用CSS创建两个三角形：before和：after伪选择器，然后将它们直接放在td上。

TBH，使用背景图像可能更容易，更强大。