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

我有一个表格，我想根据动态值设置单元格样式。我需要完成以下任务：

所以有两种颜色的单元格，一种是纯色，另一种是纯色，但上面有图案，另一种只是边框（红色）

因此，每个元素都是一个

HTML标记

我正在考虑创建图像，然后将它们设置为背景，但我想知道是否有一种简单的

CSS

方法来实现这一点

---

有什么建议吗？

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

TBH，使用背景图像可能更容易、更可靠。

以下是您的答案：

以下是表格示例：

html

---

---

从这篇博文来看，似乎有一些你想要的模式。嗨，在性能方面，有什么更好：背景图像还是纯css？考虑到我将有一个31列50行的表。感谢一个lotHi，在性能方面，什么会更好：背景图像还是纯css？考虑到我将有一个31列50行的表。谢谢，纯css会更好！图像会减慢你的网站！兄弟！毫无疑问请投票！谢谢兄弟！请向上投票[箭头]以获得答案！如果您对这个问题有任何进一步的疑问，请告诉我@VAAA纯css并不是对一切都有好处。这取决于您在页面上使用它的程度以及它的复杂性，它确实会降低性能。在某些浏览器上，它甚至不起作用。除了最初的请求和加载之外，映像的性能非常小，并且具有更好的向后兼容性。你能确定的唯一方法就是自己测试它。假500行，假1000行。看看它的表现如何。如果它工作得很好，请使用CSS保存它。这里有一篇讨论CSS与图像性能的文章，不错，但是总体上讲CSS规则是正确的！在将来的网站中，图像将被SVG和css3组件所取代！

    <div>
</div>

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