0

我想在突出显示的表格单元格的角落添加一个三角形（使用 CSS 边框和 :before）。如果我使用默认的 display:table-cell，它不会正确添加到单元格的角落，而是添加到表格的角落。所以我使用 display:block 那个表格单元格。

这是代码：

.cell-highlighted-triangle {
    display: block;
    position: relative;
}

.cell-highlighted-triangle:after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    border-width: 0 20px 20px 0;
    border-bottom-color: transparent;
    border-right-color: #510FAD;
    border-style: solid;
}

为了突出显示一个表格单元格，我使用了这个： td class="cell-highlighted-triangle"

然而，这是结果，它表明突出显示的列单元格 2、3、4 都被夹在了列 2 中。

https://lh5.googleusercontent.com/-wUJrlaeugAI/T7UEbCdbA2I/AAAAAAAAAJM/_iu9ZxHrwGc/s519/pic.png

非常感谢你帮助我！任何建议表示赞赏！

4

2 回答 2

0

试试 display: inline-block; 应该像内联和块之间的混合！

于 2012-05-17T14:04:38.363 回答
0

您必须在样式中添加属性：内容：“”；

.cell-highlighted-triangle:after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    border-width: 0 20px 20px 0;
    border-bottom-color: transparent;
    border-right-color: #510FAD;
    border-style: solid;
}
于 2012-05-17T14:07:47.140 回答