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.

回答1:

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.

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>

回答2:

You need to add a rotating degree to the linear-gradient. Note that this is dependent on the height of the td element.

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>

Independent of height:

Based on Harry's comment to top right will work better since it is independent of the height.

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>

回答3:

As in this JSFiddle, you just need to set gradient angles like 33deg to match the corners in my example

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>

来源：https://stackoverflow.com/questions/33458743/table-cell-two-color-background-diagonally

标签

html

css

css3

linear-gradients