html - How to add triangle in table cell

Question

I need to add up-right triangle in a cell.

How to do this?

I tried to add span and icon inside span, but it goes awry

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

Answer 1

Using CSS Triangles:

You basically have a 0 height, 0 width element, and use the borders to construct the triangle. Because the line between borders (for example, between top and left) is diagonal, you can create nice looking, solid color triangles with it!

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> */

Advantages:

• No Images! - Meaning, no extra request.
• No Additional Markup! - Meaning, you don't litter your HTML with unsemantic markup.
• Looks good on all sizes! - Because it renders in the browser, it would look perfect on any size and any resolution.

Disadvantages:

• Depends on pseudo-elements - Meaning that lower versions of IE will not display the triangle. If it's critical, you can modify the CSS a bit, and use a <span> in your HTML, instead of relying on :after.