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

Question

我有一张这样的表：

<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>

有一个＆＃34;座位不可用＆＃34;背景黑色，座位可用绿色背景，我想添加一个座位（座位 - badvis）与两种颜色，半黑色和半白色。我尝试使用:after和:before，但它无法正常工作。

这里是我的代码的小提琴：

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

Answer 1

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

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

这是一个背景小提琴，所以更容易看到差异 - ＆gt; jsfiddle

如果您要定位旧浏览器compability table

，请检查浏览器的兼容性

Answer 2

您可以使用线性渐变效果。在各种颜色停止级别上使用颜色代码。问题的方向设置为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 3

您不需要在此处使用伪选择器，而是使用线性渐变：

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

这是一个小提琴：http://jsfiddle.net/dbbtxL50/

Answer 4

您可以使用背景渐变：

.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并将此link用于精湛的渐变生成器。

Answer 5

使用简单的渐变并删除之前和之后。我还添加了一个边框，以防万一。

此处a fiddle

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;