表单元格两个颜色背景对角线 [英] Table Cell two color background diagonally

问题描述

表格单元格是否可能具有多种背景颜色，如下图所示?

Is it possible to have multiple background color for a Table cell like in the image below?

​​双色表单元格背景似乎可以实现我想要的功能，但是它不是完全对角线.

Two color table cell background seems to do something like what I want but it is not exactly diagonal.

推荐答案

现有的答案都不错，但这绝不是试图以任何方式将它们放下.这是对它们的改进，如果您希望使用渐变的响应式设计，可以使用它.

Both the existing answers are good and this is not at attempt to put them down in any way. This is an improvement on them which can be used if you want responsive design with gradients.

正如在其他两个答案中已经提到的(并在下面的代码段中看到的那样)，如果td的高度或宽度发生变化，则应修改渐变的角度.当设计必须响应时，这是一个缺点，但是当使用to [side] [side]渐变语法而不是成角度的渐变时，可以避免这种情况.这种语法可以适应尺寸的任何变化.

As already mentioned in the other two answers (and seen in the snippet below), the gradient's angles should be modified if the height or width of the td changes. This is a drawback when then design has to be responsive but it can be avoided when using the to [side] [side] gradient syntax instead of angled gradients. This syntax can adapt to any change in dimensions.

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

里面的文本需要额外的位置才能使其看起来完全像问题中的样子.

The text inside would need extra positioning to make it appear exactly like 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>

这篇关于表单元格两个颜色背景对角线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！