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

Question

我的一些表格单元格中包含大量内容。我不想显示所有这些，直到用户在单元格上悬停，但我想在角落放一个箭头表示它可以悬停 - 就像在excel评论中一样。我怎么能用CSS做到这一点？

Answer 1

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

Answer 2

您可以使用CSS形状和绝对定位来完成此任务。

这是一个小提琴：http://jsfiddle.net/pNmQg/

table td { position: relative;  }
table td span.arrow { 
    position: absolute; 
    top: 0; 
    right: 0;
    border-top: 5px solid red;
    border-left: 5px solid transparent;
}

Answer 3

只需用宽度和高度替换100，并在正确的位置添加位置

.triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

Answer 4

我找到了兼容所有浏览器的另一种解决方案---经过测试。

          .arrow-right-1 {
            position: absolute;
            top: -1px;
            right: -5px;
            float: right;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid red;
         
            transform: rotate(45deg);
          }
          
         
          
          td {
            border: solid 1px blue;
            width: 220px;
            height: 100px;
            /* padding: 0px !important; */
            /* vertical-align: top; */
            position: relative;
          }

<table class="table">

  <tbody>
    <tr>
      <td>
        <div class="arrow-right-1"></div>you can increase or decrease the size td's width/height or can put more text
      </td>

    </tr>

  </tbody>
</table>