解决方法
使用CSS形状和伪元素:
HTML
<table> <tr><td class="comment">Foo</td></tr> </table>
CSS
* { margin: 0; padding: 0;} td { border: 1px solid black; } .comment:after { content: ""; position: relative; top: 0.5em; border-left: 0.5em solid transparent; border-top: 0.5em solid red; }
修正包装的更新答案:
/* add relative positioning to the td */ td { border: 1px solid black; position: relative; } /* and absolute positioning for the triangle */ .comment:after { content: ""; position: absolute; /* left: calc(100% - 0.5em); */ /* use right: 0; instead */ right: 0; top: 0; border-left: 0.5em solid transparent; border-top: 0.5em solid red; }