Fondo de dos colores de la celda de tabla en diagonal

¿Es posible tener múltiples colores de fondo para una celda de tabla como en la imagen de abajo?

Ejemplo de celda de tabla

El fondo de la celda de la tabla de dos colores parece hacer algo como lo que quiero, pero no es exactamente diagonal.

Ambas respuestas existentes son buenas y esto no es un bash de ponerlas de ninguna manera. Esta es una mejora en ellos que puede usarse si desea un diseño receptivo con degradados.

Como ya se mencionó en las otras dos respuestas (y se ve en el siguiente fragmento), los angularjs del degradado deberían modificarse si cambia la altura o el ancho del td . Esto es un inconveniente cuando el diseño tiene que responder, pero se puede evitar cuando se utiliza la syntax de degradado to [side] [side] lugar de degradados en ángulo. Esta syntax se puede adaptar a cualquier cambio en las dimensiones.

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

El texto interno necesitaría un posicionamiento adicional para que aparezca exactamente como en la pregunta.

 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; } 
   
Two Color Background
Two Color Background
Two Color Background
Two Color Background
Two Color Background
Two Color Background
Two Color Background
Two Color Background
Two Color Background

Debe agregar un grado de rotación al gradiente lineal. Tenga en cuenta que esto depende de la altura del elemento td .

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

Como en este JSFiddle , solo necesitas establecer angularjs de gradiente como 33deg para que coincidan con las esquinas en mi ejemplo

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