颜色只是表格单元格的一小部分

Question

我有一张桌子。我只需要为表格单元格的一小部分着色。就像，在细胞右上方的一个小三角形。我尝试了一些css和所有。但似乎没有任何事情可以实现。我更喜欢css。不要求css3。

示例图片

Answer 1

伪元素应该可以解决问题。

编辑：此伪元素的content没有自己的大小，但您可以单独为边框着色，因为边框以某个角度相交，您可以制作三角形（（搜索CSS三角形） SO）

JSfiddle Demo

<强> HTML

<table>
    <tr>
        <td> first </td>
        <td> second </td>
        <td> third </td>
    </tr>

</table>

<强> CSS

table td {
    position: relative; /* Needed for pseudo elem */
    height:30px;
}
table td:after {
    content:"";
    position: absolute;
    top:0;
    right:0;
    width:0;
    height:0;
    border:10px solid red;
    border-left-color: transparent;
    border-bottom-color:transparent;
    z-index:1
}

Answer 2

创建你想要的小jpg形状并使用这个css

background-image: url('[image url]');
background-repeat: no-repeat;
background-position: top right;

如果您需要更改背景图片的大小，可以添加background-size: [size];

Answer 3

1. 将红色作为图像（您需要的任何尺寸）。

2. 在Html中

   <span style="position:relative;border:1px solid black;width:200px:height:50px"> <img src="/red color image link" style="position:absolute;top:0;right:0"> <span>

我写了内联css

将容器设为位置：relative 红色图像作为位置：绝对;然后顶部：0和右：0。 通过使用顶部，右侧，左侧，底部值，我们可以将图像定位在任何位置