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

Question

我需要在单元格中添加右三角形.

这该怎么做？

我试图在span内添加span和icon,但是它出错了

<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.