title: Diagonally merge two column into one with different color background
body: <p>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.</p>
  
  <p>Problem now is, that some columns need to be merged - including their different colors being diagonally split, i.e. like this:</p>
  
  <p><img src="https://i.stack.imgur.com/dWHWK.jpg" alt="enter image description here"></p>
  
  <p>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?</p>