CODEWITHSUNDEEP
htmlcssstylesheetcss-tables
VAAA
VAAA

Reputation: 15039

CSS table cell background image style (two triangles)

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

enter image description here enter image description here

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?

Upvotes: 1

Views: 1753

Answers (2)

Suresh Karia
Suresh Karia

Reputation: 18218

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;
    }

Upvotes: 2

Seth Warburton
Seth Warburton

Reputation: 2413

Sure. Create two triangles with CSS using :before and :after pseudo-selectors and then position them directly over your td.

TBH, it's probably easier, and more robust, to use a background image though.

Upvotes: 1

Related Questions