Two-color diagonal column

Question

Is it possible to have multiple background colors for a table cell, as in the image below?

The bi-color background of the table cell seems to do something like what I want, but it is not exactly diagonal.

Answer 1

Both existing answers are good, and this is not an attempt to displace them. This improves them, which can be used if you want a flexible design with gradients.

As mentioned in the other two answers (and in the snippet below), the gradient angles should be changed if the height or width td changes. This is a drawback when then the design should be responsive, but it can be avoided by using the gradient syntax to [side] [side] instead of corner gradients. This syntax can adapt to any resizing.

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

Inside the text, additional positioning is required to make it look exactly the same as 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> 

Answer 2

You need to add the degree of rotation to the linear gradient. Note that this depends on the height of the td element.

 td { background: rgba(240, 105, 93, 1); background: linear-gradient(18deg, #167891 50%, #0D507A 51%); color: #fff; height: 50px; } 

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

Regardless of height:

Based on the commentary, Harry to top right will work better since he is independent of height.

 td { background: rgba(240, 105, 93, 1); background: linear-gradient(to top right, #167891 50%, #0D507A 51%); color: #fff; height: 50px; } 

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

Answer 3

Like in this JSFiddle , you just need to set gradient angles like 33deg to fit the angles in my example

 td { height:100px; background: -webkit-linear-gradient(33deg, lightblue 50%, navy 51%); background: linear-gradient(33deg, lightblue 50%, navy 51%); color:white; } 

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