答案 0 :(得分:8)
现有的答案都很好,并不是试图以任何方式将它们放下。这是对它们的改进,如果你想要具有渐变的响应式设计,可以使用它。
正如在其他两个答案中已经提到的(并在下面的代码段中看到),如果td
的高度或宽度发生变化,则应修改渐变角度。当设计必须响应时,这是一个缺点,但在使用to [side] [side]
渐变语法而不是倾斜渐变时可以避免这种情况。此语法可以适应尺寸的任何变化。
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>
&#13;
答案 1 :(得分:4)
您需要为线性渐变添加旋转度。请注意,这取决于td
元素的高度。
td {
background: rgba(240, 105, 93, 1);
background: linear-gradient(18deg, #167891 50%, #0D507A 51%);
color: #fff;
height: 50px;
}
&#13;
<table>
<tr>
<td>
Two Color Background
</td>
</tr>
</table>
&#13;
独立于身高:
基于Harry的评论to top right
会更好,因为它与高度无关。
td {
background: rgba(240, 105, 93, 1);
background: linear-gradient(to top right, #167891 50%, #0D507A 51%);
color: #fff;
height: 50px;
}
&#13;
<table>
<tr>
<td>
Two Color Background
</td>
</tr>
</table>
&#13;
答案 2 :(得分: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;
}
&#13;
<table>
<tr>
<td>Two Color Background</td>
</tr>
</table>
&#13;