All geek questions in one place

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 an arrowhead using s and borders ... These are the diagonal lines of the arrowhead that I don’t know how to do.

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

I tried unicode characters for arrows (html objects ⇦, ⇧, ⇨ and ⇩). That would be a solution, but in each browser they look very different. Other problems with this include the inability to at least make the inside of the arrows opaque.

Ideally, I can fill the arrows with a gradient.

+4
source share
9 answers

Well, you can still use ⇦ , that is, the one you indicated in your question.

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

http://jsfiddle.net/yd9gf/

In addition to the image Build using only css;) 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; }
+4
source

Have you tried these arrows?

 ↑↓←→↔↕

Unicode: 2190 → 2195

+3
source

In this case, I will probably go for svg and to cover your IE 7 requirements I would use vml as a recession. There are conversion tools for svg - vml . In addition, both work similarly to images, but do not look bad when using scaling, since they are vector graphics.

Look here if this path applies to you: http://vectorconverter.sourceforge.net/

+1
source

Use an image possibly consisting of sprites.

By the time other solution files are loaded, you are likely to be the same size or larger than the optimized image. In any case, the images are completely reliable and work on all browsers; An esoteric solution, while fun to create, can be a support nightmare (no one ever complains online so you don't know when it broke).

+1
source

Short and simple

Use HTML Codes

→ ( &#8594; or &#x2192; )
← ( &#8592; or &#x2190; )
↑ ( &#8593; or &#x2191; )
↓ ( &#8595; or &#x2193; )

Example: a → b → c
code for the above example a&#8594;b&#8594;c

if you want more codes like this, check out: http://character-code.com/arrows-html-codes.php

Hope this helps.

+1
source

You can also try to get two boxes to ratify them on diaomnds, and create a rectangle behind them to set the borders too 1px

0
source

You have many options.

  • Option 1: Webdings Font: http://en.wikipedia.org/wiki/Wingdings
  • Option 2: Custom CSS Downloadable Font
  • Option 3: Reduce Size / High Resolution Reduced
  • Option 4: embedded SVG or as an image
  • Option 5: any of the above functions using CSS transforms

Option 2 is probably the most reliable. Option 5 - Support in IE7 using MS provider extensions such as filters and recording mode.

 .rotated { -moz-transform: rotate(90deg); -moz-rotation-point: 0 0; -webkit-transform: rotate(90deg); -webkit-rotation-point: 0 0; -o-transform: rotate(90deg); -ms-writing-mode: tb-lr; * html writing-mode: tb-lr; }
0
source

Another solution is as follows:

 span { font-weight: bold; letter-spacing: -5px} <span>&#61;&#62;</span>

looks like this: =>

(looks better when applying a style that doesn't seem to work here)

0
source

Source: https://habr.com/ru/post/1343732/

More articles:


All Articles