表格单元格两种颜色背景对角线答案

【问题标题】：Table Cell two color background diagonally表格单元格两种颜色背景对角线
【发布时间】：2015-11-01 02:50:45
【问题描述】：

如下图所示的表格单元格是否可以有多种背景颜色？

Two color table cell background 似乎做了我想要的，但它并不完全是对角线。

【问题讨论】：

【解决方案1】：

现有的两个答案都很好，这并不是试图以任何方式贬低它们。这是对它们的改进，如果您想要带有渐变的响应式设计，可以使用它。

正如在其他两个答案中已经提到的（并在下面的 sn-p 中看到），如果 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>

【讨论】：

@Henry - 太棒了，实际上我也想问同样的问题，因为我刚刚遇到了这个问题。非常感谢！
@PaRiMaLRaJ：不客气，伙计。总是很高兴能提供帮助:)
一个小问题，为什么是49% & 50%，为什么不是50% & 51%？
@PaRiMaLRaJ:50%, 51% 意味着下一个颜色将从边缘开始。我认为49.5% 50.5% 可能更贴切。让我在代码中检查一下。（百分比差异是为了平滑锯齿状边缘，这些边缘在所有具有对角线或倾斜渐变的浏览器中都会出现）。
@Henry - 谢谢，理解，渐变看起来很棒，将有更多时间更好地控制 CSS 渐变。

【解决方案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>

与高度无关：

根据 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;
}

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

【讨论】：

您还可以使用to [side] [side] 语法来保持对角线着色独立于td 的尺寸:)
谢谢你的建议，哈利。你是最棒的！ :)

【解决方案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>

【讨论】：