Thursday 8 August 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

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...