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

演示

更新了修复包装的答案：

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

固定演示

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>