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

Question

我需要在单元格中添加一个正三角形。

如何实现？

我尝试在 span 中添加图标，但是效果不对。

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

- Mediator

---

你可不可以不要设置 style 属性为 'background: url(@Html.ImageContent("triangle")) ... position-attributes ... '？ - Kane

@Kane，谢谢。它已经起作用了。请输入答案。 - Mediator

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

- Madara's Ghost

---

注意：在FF 18.0.1中，三角形出现在整个页面的右上角而不是表格单元格中。 - Vloxxity

@Vloxxity：你做错了什么。你确定在实际元素上添加了“position: relative;”吗？ - Madara's Ghost

起初，三角形也出现在整个页面的右上角，建议在实际元素上添加position: relative;就解决了问题。 - Bruce

是的，我在css-tricks上找到了基础知识，但我没有意识到我可以/必须在“td”中添加“position: relative”，这就解决了问题 :) - Francesco Marchetti-Stasi

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示例

我发现只有在<td>为空时才能实现没有内部<div>，这可能并不有用。

- TheShrew

Answer 3

在div中处理单元格文本是好主意，但仅为箭头而不是文本添加额外的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>

- Rajan Kumar