Html 我怎样才能用两种颜色给一个正方形的div上色？

我有一张这样的桌子：

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

有一个黑色背景的“座椅不可用”，有绿色背景的座椅可用，我想添加一个有两种颜色的座椅（座椅badvis），一半是黑色，一半是白色。我尝试了

：after

和

：before

，但不起作用

下面是我的代码：

---

您可能希望使用线性渐变：

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

.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 */
}

这是一个背景摆弄，因此更容易看到差异->

---

检查浏览器兼容性如果您针对的是较旧的浏览器

您可以使用背景渐变：

.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 */
}

看到这个了吗

如果需要，还可以更改颜色的方向

---

请查看并使用此功能创建一个出色的渐变生成器。

您可以使用线性渐变来实现效果。在各种颜色停止级别上使用颜色代码。针对您的问题，将方向设置为右侧

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

。座椅可用分区，
.座位不可用分区，
.badvis分区座位{
高度：12px！重要；
宽度：12px！重要；
-webkit边界半径：2px；
-moz边界半径：2px；
边界半径：2px；
光标：指针；
}
.所选席位{
高度：12px！重要；
宽度：12px！重要；
-webkit边界半径：50%；
-moz边界半径：50%；
边界半径：50%；
光标：指针；
背景：#ffc720；
边框：5e6461实心1px；
}
.可供选择的座位{
背景#05cd7a；
}
.座位不可用{
背景：#000；
边框：1px实心#333333；
}
卢格斯酒店{
填充：2px！重要；
}
.badvis分区座位{
背景：线性梯度（向右，#000 0%，#000 51%，#fff 51%，#fff 100%）；
边框：1px实心#333333；
}

---

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

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

---

这里有一把小提琴：

使用一个简单的渐变，去掉前后的颜色。我还添加了一个边框，以防您需要

这是

.seat available div、.seat not available div、.seat badvis div{
高度：12px！重要；
宽度：12px！重要；
-webkit边界半径：2px；
-moz边界半径：2px；
边界半径：2px；
光标：指针；
}
.所选席位{
高度：12px！重要；
宽度：12px！重要；
-webkit边界半径：50%；
-moz边界半径：50%；
边界半径：50%；
光标：指针；
背景：#ffc720；
边框：5e6461实心1px；
}
.可供选择的座位{
背景#05cd7a；
}
.座位不可用{
背景：#000；
边框：1px实心#333333；
}
.badvis分区座位{
背景：线性梯度（90度，红色50%，蓝色50%）；/*梅塔德·维梅略，梅塔德·阿苏尔*/
边框：1px纯黑
}
卢格斯酒店{
填充：2px！重要；
}

记住接受其中一个答案，这样我们就知道这个问题已经得到了回答，并且您的问题已经成功解决。@Paulofruoso建议的任何解决方案解决了您的问题吗？如果是，请接受这个答案。