使用CSS在表格单元格内绘制一个箭头

前端之家收集整理的这篇文章主要介绍了使用CSS在表格单元格内绘制一个箭头前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的一些表格单元格中包含大量内容.我不想显示所有这些,直到用户在单元格上悬停,但我想在角落放一个箭头表示它可以悬停 – 就像在excel注释中一样.我怎么能用CSS做到这一点?

解决方法

使用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;
}

DEMO

修正包装的更新答案:

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

Fixed Demo

猜你在找的CSS相关文章