表格单元格对角线的两个颜色背景

Question

是否可以为表格单元格使用多个背景颜色，如下图所示？

Two color table cell background似乎这样做我想要什么，但它是不完全的对角线。

Answer 1

无论是现有的答案很好，但这不是不要试图以任何方式放弃它们。如果您希望使用渐变响应式设计，则可以使用这些改进。如上所述，在其他两个答案（以及下面的代码片段中已经提到）中，如果td的高度或宽度改变，则应该修改梯度的角度。当设计必须具有响应性时，这是一个缺点，但在使用梯度语法而不是倾斜渐变时可以避免这种情况。该语法可以适应维度的任何变化。

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

里面的文本将需要额外的定位，以使它看起来完全像问题。

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

您需要将旋转度添加到线性渐变中。请注意，这取决于td元素的高度。

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>

独立高度：

根据哈利的评论to top right将更好地工作，因为它是高度无关。

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

在本JSFiddle，你只需要设置渐变的角度想33deg相匹配的角落在我的例子

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>