html - 如何在表格单元格中添加三角形

Question

我需要在单元格中添加直角三角形。

这该怎么做？

我试图在跨度内添加跨度和图标，但它出错了

<span style="position: relative;float:right;top:-30px;">@Html.ImageContent("triangle_bonus.png", "")</span>

Answer 1

使用CSS 三角形：

你基本上有一个 0 高度，0 宽度的元素，并使用边框来构造三角形。因为边界之间的线（例如，顶部和左侧之间）是对角线，你可以用它创建漂亮的纯色三角形！

这是一个例子！

HTML：

<table border="1">
    <tr>
        <td class="note">Triangle!</td>
        <td>No Triangle!</td>
    </tr>
</table>

CSS：

td {
    padding: 20px;
}
.note {
    position: relative;
}
.note:after { /* Magic Happens Here!!! */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0; 
    height: 0; 
    display: block;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;

    border-top: 20px solid #f00;
} /* </magic> */

好处：

• 没有图片！- 意思是，没有额外的要求。
• 没有额外的标记！- 意思是，你不会在你的 HTML 中乱扔无意义的标记。
• 各种尺寸看起来都不错！- 因为它在浏览器中呈现，所以它在任何尺寸和任何分辨率下看起来都很完美。

缺点：

• 取决于伪元素- 这意味着较低版本的 IE 不会显示三角形。如果它很关键，您可以稍微修改 CSS，并<span>在 HTML 中使用 a，而不是依赖:after.

Answer 2

通过谷歌找到了这个问题并遇到了问题，所以我会在这里添加这个，尽管原始帖子的年龄。

Madara 的答案适用于大多数浏览器，并且适用于所有浏览器中表格之外的任何地方。但正如评论中提到的，该示例在 Firefox 中不起作用。

Bugzilla 中有一张关于不在元素中工作的旧票。position:absolute;<td>

主要解决方案是添加一个内部<div>：

HTML：

<table border="1">
<tr>
    <td><div class="note">Triangle!</div></td>
    <td>No Triangle!</td>
</tr>
</table>

CSS：

td .note {
    padding: 20px;
}

jsFiddle 示例

我确实发现没有内部也可以实现，<div>但只有当它<td>是空的时，这可能无济于事。

Answer 3

在 div 中做单元格文本是个好主意。但如果你只是为 ARROW 而不是文本放置额外的 div。因为它在td给定宽度和高度并且文本保持在 TOP时会产生问题padding-top:20px;。

我找到了另一个解决方案并在所有主要浏览器上进行了测试（例如：IF 和 FF）

.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: 160px;
  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 of td's height or can put more text
      </td>

    </tr>

  </tbody>
</table>