Create a thick arrow using only HTML/CSS

Question

Is there a way to create 4 thick arrows pointing up, down, left and right using only html and css? It's very easy to create the stem of the arrow using s and borders... It's the diagonal lines of the head of the arrow that I don't know how to do.

I need this to work in IE7+ and all modern browsers. I use jQuery and am happy to depend on it. This has to be intimately integrated with other html elements, so I don't want to use something like Raphael to draw it. Images are problematic because they're difficult to zoom in on smoothly.

I tried the unicode characters for arrows (html entities ⇦, ⇧, ⇨ and ⇩). This would've been a solution, but they render so very differently in every browser. Other issues with this include not being able to at least make the inside of the arrows opaque.

Ideally I can fill in the arrows with a gradient.

Answer 1

Well you can still use ⇦ ,i.e the one that you specified in your question.

If you want them to appear bigger, change the font-size using css.

http://jsfiddle.net/yd9gf/

Also
Build using css only ;) http://jsfiddle.net/xJrpq

And here is the code for the css version

HTML

<div class="b"></div>

CSS

.b {
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid black;
    width: 0;
    height: 0;
}

Answer 2

Did you try these arrows ?

↑↓←→↔↕

Unicode : 2190 -> 2195

Answer 3

Short and simple

Use HTML codes

→ ( → or →)
← ( ← or ← )
↑   ( ↑ or ↑ )
↓   ( ↓ or ↓ )

Example: a→b→c
code of the above example is a→b→c

if you want more codes like this then refer : http://character-code.com/arrows-html-codes.php

Hope it helps.