Table Cell two color background diagonally

Question

Is it possible to have multiple background color for a Table cell like in the image below?

Two color table cell background seems to do something like what I want but it is not exactly diagonal.

Answer 1

Both the existing answers are good and this is not at attempt to put them down in any way. This is an improvement on them which can be used if you want responsive design with gradients.

As already mentioned in the other two answers (and seen in the snippet below), the gradient's angles should be modified if the height or width of the td changes. This is a drawback when then design has to be responsive but it can be avoided when using the to [side] [side] gradient syntax instead of angled gradients. This syntax can adapt to any change in dimensions.

td {
  background: linear-gradient(to top right, #167891 49.5%, #0D507A 50.5%);
  color: #fff;
}

The text inside would need extra positioning to make it appear exactly like in the question.

tr:nth-child(3) td {
  background: linear-gradient(to top right, #167891 49.5%, #0D507A 50.5%);
  color: #fff;
}
tr:nth-child(1) td {
  background: linear-gradient(18deg, #167891 50%, #0D507A 51%);
  color: #fff;
}
tr:nth-child(2) td {
  background: linear-gradient(33deg, #167891 50%, #0D507A 51%);
  color: #fff;
}

/* Just for demo */

table {
  float: left;
}
table:nth-child(2) td {
  height: 50px;
}
table:nth-child(3) td {
  height: 100px;
}
table:nth-child(4) td {
  height: 150px;
}

<!-- prefix library included only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<table>
  <tr><td>Two Color Background</td></tr>
  <tr><td>Two Color Background</td></tr>
  <tr><td>Two Color Background</td></tr>
</table>
<table>
  <tr><td>Two Color Background</td></tr>
  <tr><td>Two Color Background</td></tr>
  <tr><td>Two Color Background</td></tr>
</table>
<table>
  <tr><td>Two Color Background</td></tr>
  <tr><td>Two Color Background</td></tr>
  <tr><td>Two Color Background</td></tr>
</table>