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

Question

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

如何做到这一点？

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

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

Answer 1

使用 CSS Triangles:

您基本上有一个高度为 0、宽度为 0 的元素，并使用边框来构建三 Angular 形。因为边框之间的线(例如，顶部和左侧之间的线)是对 Angular 线，所以您可以用它创建美观的纯色三 Angular 形!

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 不会显示三 Angular 形。如果它很关键，你可以稍微修改一下 CSS，并使用 <span>在你的 HTML 中，而不是依赖 :after .