html - 仅对表格单元格的一小部分着色

Question

我有一张 table 。我只需要为表格单元格的一小部分着色。比如，单元格右上角的小三 Angular 形。我尝试了一些 css 和所有。但似乎没有什么能达到同样的效果。我更喜欢CSS。不需要 css3。

示例图片

Answer 1

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

编辑:此伪元素的 content 本身没有大小，但您可以单独为边框着色，并且由于边框以一定 Angular 相交，您可以制作三 Angular 形((搜索SO 上的 CSS 三 Angular 形)

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
}