Draw a triangle with CSS?

I know you can draw with a canvas element, I just wanted to know if it was possible to draw a triangle next to a link without using a canvas element? I just want a small < 16px down arr开发者_运维问答ow.

Here is my take on drawing a triangle in css. You can view it on JSFiddle. Have not done any browser testing (works in Chrome!)

The CSS is pretty simple:

.triangle{
display: block;
border-bottom: 16px solid transparent;
border-left: 16px solid red;
overflow: hidden;
position: absolute;
}

If you want it pointing in a different direction, just alter the borders. For example, the following will point the triangle downward:

.triangle{
display: block;
border: 16px solid transparent;
border-top: 16px solid red;
overflow: hidden;
position: absolute;
}

Edit: Works in latest IE, FF and Chrome.

Nope.

The closest you could get is by using an ASCII key, ↓ to be precise.

It produces an arrow like this ↓

Of course a background-image will do the trick, but that's quite obvious, innit? :)

U+25BC: Black Down-Pointing Triangle exists in Unicode. Here it is: ▼

You could use this CSS to apply it:

a:before {
    content: "▼";
}

It's probably better to use a background-image though. That way, you would not depend on the existence of such special characters in the font the web browser uses, and it would show up in IE 6/7. For example:

a {
    background-image: url("arrow.gif");
    padding-left: 16px;
}

No. Just use a special ASCII character, &#darr;, no CSS required:

<span id = "down-arrow">&#darr;</span>

Here's my simple drawing for the triangle using CSS:

<div style="border: 11px solid transparent; border-right-color: rgba(0, 0, 0, 0.25);"></div>

If you need to change the direction, just replace border-right-color with border-direction-color. And maybe you use position: absolute; and margin-top and margin-left properties to set the position.