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

【问题标题】：How to add triangle in table cell如何在表格单元格中添加三角形
【发布时间】：2013-01-24 10:26:27
【问题描述】：

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

如何做到这一点？

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

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

【问题讨论】：

可以不设置style='background: url(@Html.ImageContent("triangle")) ... position-attributes ...'
@Kane，谢谢。它奏效了。请输入答案

标签： html css css-tables

【解决方案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。

【讨论】：

注意：在 FF 18.0.1 中，三角形显示在整个页面的右上角，而不是表格单元格。
@Vloxxity：你做错了什么。您确定在实际元素上添加position: relative; 吗？
起初三角形也出现在我整个页面的右上角，建议添加 position: relative;在实际元素上成功了
是的，我已经找到了关于 css-tricks 的基本知识，但我没有意识到我可以/必须将 position: relative 添加到 td，这样就成功了 :)

【解决方案2】：

通过谷歌找到了这个问题并遇到了问题，所以尽管原始帖子的年代久远，我还是会在此处添加此问题。

马达拉的答案适用于大多数浏览器，并且适用于所有浏览器中表格之外的任何地方。但正如 cmets 中所述，该示例在 Firefox 中不起作用。

有一个very old ticket in 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 example

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

【讨论】：

【解决方案3】：

在 div 中做单元格文本是个好主意。但如果你只是为 ARROW 而不是文本放置额外的 div。因为当td 给出宽度和高度并且文本与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>

【讨论】：