如何用两种颜色为正方形 div 上色？

Question

我有一个 table 这样的：

<table class="lugares">
    <tr>
        <td class="seat-avaliable"><div></div></td>
        <td class="seat-avaliable"><div></div></td>
        <td class="seat-avaliable"><div></div></td>
        <td class="seat-avaliable"><div></div></td>
        <td class="seat-not-avaliable"><div></div></td>
        <td class="seat-badvis"><div></div></td>
        <td class="seat-avaliable"><div></div></td>
    </tr>
</table>

有一个 "seat-not-available" 背景黑色，座位可用绿色背景，我想添加一个座位 (seat-badvis)，有两种颜色，一半黑色，一半白色。我尝试使用 :after 和 :before 但它不起作用。

这是 fiddle 和我的代码：

http://jsfiddle.net/g8p9pn1v/38/

Answer 1

您可能想要使用线性渐变：

.seat-badvis div {
    background: linear-gradient(90deg, #5e6461 50%, white 50%);
}

这里是 fiddle 有背景的，所以更容易看出区别 -> jsfiddle

如果您的目标是较旧的浏览器，请检查浏览器兼容性compability table

Answer 2

您可以使用背景渐变：

.seat-badvis div {
    border: 1px solid black;
    background: rgb(0, 0, 0);/* Old browsers */
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 1) 49%, rgba(255, 255, 255, 1) 50%);/* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(49%, rgba(0, 0, 0, 1)), color-stop(50%, rgba(255, 255, 255, 1)));/* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 49%, rgba(255, 255, 255, 1) 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(0, 0, 0, 1) 49%, rgba(255, 255, 255, 1) 50%);/* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 1) 49%, rgba(255, 255, 255, 1) 50%);/* IE10+ */
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 49%, rgba(255, 255, 255, 1) 50%);/* W3C */
}

看到这个FIDDLE

如果需要，您也可以更改颜色的方向。

寻找 here and use this link 一个极好的渐变生成器。

Answer 3

您可以使用线性渐变效果。在各种颜色停止级别上使用颜色代码。为您的问题设置方向to right。

.seat-badvis div {
  background: linear-gradient(to right, #000 0%, #000 51%, #fff 51%, #fff 100%);
  border: 1px solid #333333;
}

.seat-avaliable div,
.seat-not-avaliable div,
.seat-badvis div {
  height: 12px !important;
  width: 12px !important;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  cursor: pointer;
}
.seat-selected div {
  height: 12px !important;
  width: 12px !important;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  background: #ffc720;
  border: #5e6461 solid 1px;
}
.seat-avaliable div {
  background: #05cd7a;
}
.seat-not-avaliable div {
  background: #000;
  border: 1px solid #333333;
}
.lugares td {
  padding: 2px!important;
}
.seat-badvis div {
  background: linear-gradient(to right, #000 0%, #000 51%, #fff 51%, #fff 100%);
  border: 1px solid #333333;
}

<table class="lugares">
  <tr>
    <td class="seat-avaliable">
      <div></div>
    </td>
    <td class="seat-avaliable">
      <div></div>
    </td>
    <td class="seat-avaliable">
      <div></div>
    </td>
    <td class="seat-avaliable">
      <div></div>
    </td>
    <td class="seat-not-avaliable">
      <div></div>
    </td>
    <td class="seat-badvis">
      <div></div>
    </td>
    <td class="seat-avaliable">
      <div></div>
    </td>
  </tr>

</table>

Answer 4

你不需要在这里使用伪选择器，而是使用线性渐变：

background: linear-gradient(to right, #fff 50%,#000 50%);

这里是 fiddle：http://jsfiddle.net/dbbtxL50/

Answer 5

使用简单的渐变并删除之前和之后。我还添加了边框，以备不时之需。

这里是a fiddle

.seat-avaliable div, .seat-not-avaliable div, .seat-badvis div {
    height: 12px !important;
    width: 12px !important;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    cursor: pointer;
}
.seat-selected div {
    height: 12px !important;
    width: 12px !important;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    background: #ffc720;
    border: #5e6461 solid 1px;
}
.seat-avaliable div {
    background: #05cd7a;
}
.seat-not-avaliable div {
    background: #000;
    border: 1px solid #333333;
}

.seat-badvis div {
    background: linear-gradient(90deg, red 50%, blue 50%); /* metade vermelho, metade azul*/
    border: 1px solid black
}

.lugares td {
    padding:2px!important;
}

<table class="lugares">
    <tr>
        <td class="seat-avaliable">
            <div></div>
        </td>
        <td class="seat-avaliable">
            <div></div>
        </td>
        <td class="seat-avaliable">
            <div></div>
        </td>
        <td class="seat-avaliable">
            <div></div>
        </td>
        <td class="seat-not-avaliable">
            <div></div>
        </td>
        <td class="seat-badvis">
            <div></div>
        </td>
        <td class="seat-avaliable">
            <div></div>
        </td>
    </tr>
</table>

如何用两种颜色为正方形 div 上色？

How can I color a square div with two colors?

html

css

html-table