Thursday, August 8, 2019

jquery - Create a thick arrow using only HTML/CSS

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.

No comments:

Post a Comment

hard drive - Leaving bad sectors in unformatted partition?

Laptop was acting really weird, and copy and seek times were really slow, so I decided to scan the hard drive surface. I have a couple hundr...