使用 CSS 在表格单元格内绘制箭头 [英] draw an arrow inside table cell using CSS
本文介绍了使用 CSS 在表格单元格内绘制箭头的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的一些表格单元格的内容非常多.我不想在用户悬停在单元格上之前显示所有这些,但我想在角落里放一个箭头来表示它可以悬停 - 就像在 excel 注释中一样.我怎样才能使用 CSS 做到这一点?
Some of my table cells have really large amounts of content. I don't want to display all of them until the user hovers on the cell, but I want to put a arrow in the corner to indicate it can be hovered - just like in the excel comment. How can I do this using CSS?
推荐答案
使用 CSS 形状和伪元素:
Using CSS Shapes and pseudo-elements:
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;
}
更新了修复包装的答案:
Updated answer to fix wrapping:
/* 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;
}
这篇关于使用 CSS 在表格单元格内绘制箭头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文