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

Question

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

怎么做？

我尝试在span中添加span和icon，但它出错了

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

Answer 1

使用 CSS Triangles:

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

<强> Here's an Example!

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，并在HTML中使用<span>，而不是依赖:after。

Answer 2

通过Google发现此问题并遇到问题，因此我会在此处添加此内容，尽管原始帖子的年龄。

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

position:absolute; <td>无效<div>元素。

主要解决方案是添加内部<table border="1"> <tr> <td><div class="note">Triangle!</div></td> <td>No Triangle!</td> </tr> </table> ：

<强> HTML：

td .note {
    padding: 20px;
}

<强> CSS：

<div>

very old ticket in Bugzilla

我确实发现没有内部<td>就可以实现，但只有当{{1}}为空时才有效，这可能没有帮助。

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>