CSS table cell background image style (two triangles)

Question

I have a table where I want to style cells depending on a dynamic value. What I need to accomplish something like this:

So there are cells that splits two colors, other with solid colors,other with solid color but like with a pattern over it, and other with just border (red).

So each element is a <td> HTML tag

I was thinking in creating images and then set those as background but I would like to know if there is a simple CSS way to do it.

Any advice?

Answer 1

Here is your answer : DivWithGradientColor

Here is table example: 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;
    }