Diagonally merge two column into one with different color background

Question

I'm currently building an HTML/CSS table that shows values and colors each cell with either red/yellow/green or grey/white, according to some underlying logic.

Problem now is, that some columns need to be merged - including their different colors being diagonally split, i.e. like this:

While I can easily color the normal cells, I'm still looking for a elegant solution for the split cells. The only idea I have so far is to use background picture for each color combination. However, I'm wondering if there's a better, native-CSS solution?

Answer 1

You could do this with pseudo elements and css triangles.

Like so:

FIDDLE

Markup

<div class="cell">
    <div class="top">50%</div>
    <div class="bottom">40%</div>
</div>

CSS

.cell
{
    width: 100px;
    height:40px;
    color: white;
    position: relative;
    line-height: 20px;
}
.bottom
{
    text-align: right;
}
.cell div:before
{
    content: '';
    display: inline-block;
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid; 
    z-index: -1;
}
.top:before
{ 

    border-width: 40px 100px 0 0;
    border-color: green transparent transparent transparent;
}
.bottom:before
{
    border-width: 0 0 40px 100px;
    border-color: transparent transparent red transparent;
    top:1px;
    left:1px;
}