jQuery 仅使用 HTML/CSS 创建粗箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5308825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a thick arrow using only HTML/CSS
提问by at.
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.
有没有办法只使用 html 和 css 创建 4 个指向上、下、左、右的粗箭头？使用 s 和边框创建箭头的茎非常容易......这是我不知道如何做的箭头头部的对角线。
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.
我需要它在 IE7+ 和所有现代浏览器中工作。我使用 jQuery 并且很高兴依赖它。这得和其他html元素紧密结合，所以不想用Raphael之类的东西来画。图像有问题，因为它们很难平滑放大。
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.
我尝试了箭头的 unicode 字符（html 实体 ⇦、⇧、⇨ 和 ⇩）。这本来是一个解决方案，但它们在每个浏览器中的呈现方式都非常不同。其他问题包括不能至少使箭头的内部不透明。
Ideally I can fill in the arrows with a gradient.
理想情况下，我可以用渐变填充箭头。
采纳答案by Clyde Lobo
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.
如果您希望它们看起来更大，请使用 css 更改字体大小。
Also
Build using css only ;) http://jsfiddle.net/xJrpq
也
仅使用 css 构建；) http://jsfiddle.net/xJrpq
And here is the code for the css version
这是 css 版本的代码
HTML
HTML
<div class="b"></div>
CSS
CSS
.b {
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid black;
width: 0;
height: 0;
}
回答by Réj?me
Did you try these arrows ?
你试过这些箭头吗？
↑↓←→??
Unicode : 2190 -> 2195
Unicode : 2190 -> 2195
回答by GlennG
Use an image possibly consisting of sprites.
使用可能包含精灵的图像。
By the time the other solutions files are downloaded, you'll probably be at the same size or greater than an optimised image. In any case images are totally reliable and work on all browsers; an esoteric solution, whilst fun to create, may be a support nightmare (nobody ever complains on the internet so you won't know when its broken).
下载其他解决方案文件时，您的大小可能与优化图像相同或更大。在任何情况下，图像都是完全可靠的并且适用于所有浏览器；一个深奥的解决方案，虽然创建起来很有趣，但可能是一个支持噩梦（没有人在互联网上抱怨，所以你不知道它什么时候坏了）。
回答by dlo
This question has been answered pretty well, but what about simply codes like: ▼ (that's ▼)
这个问题已经得到了很好的回答，但是简单的代码怎么样：▼（那是 ▼）
http://www.fileformat.info/info/unicode/char/25bc/index.htm
http://www.fileformat.info/info/unicode/char/25bc/index.htm
http://www.fileformat.info/info/unicode/char/25b2/index.htm
http://www.fileformat.info/info/unicode/char/25b2/index.htm
http://www.fileformat.info/info/unicode/char/25ba/index.htm
http://www.fileformat.info/info/unicode/char/25ba/index.htm
回答by Bazzz
I would probably go for svgin this case and to cover your requirements of IE 7 I would use vmlas a fall-back. There are conversion tools for svgto vml. Also both work similar to images but don't look bad when using zoom as they are vector graphics.
svg在这种情况下，我可能会选择并满足您对 IE 7 的要求，我将vml用作后备。有用于svgto 的转换工具vml。两者的工作方式都类似于图像，但在使用缩放时看起来不错，因为它们是矢量图形。
Have a look here if this path appeals to you: http://vectorconverter.sourceforge.net/
如果这条路径对您有吸引力，请看这里：http: //vectorconverter.sourceforge.net/
回答by Abhishek Goel
Short and simple
简短而简单
Use HTML codes
使用 HTML 代码
→ ( →or →)
← ( ←or ←)
↑ ( ↑or ↑)
↓ ( ↓or ↓)
→（→或→）
←（←或←）
↑（↑或↑）
↓（↓或↓）
Example:a→b→c
code of the above example is a→b→c
例子：
上面例子的a→b→c代码是a→b→c
if you want more codes like this then refer : http://character-code.com/arrows-html-codes.php
如果你想要更多这样的代码，请参考：http: //character-code.com/arrows-html-codes.php
Hope it helps.
希望能帮助到你。
回答by Steven Hammons
You could try too get two boxes ratate them to diaomnds, and create a rectangle behind them set borders too 1px
您也可以尝试让两个盒子将它们设置为diaomnds，并在它们后面创建一个矩形，将边框设置为 1px
回答by PellePenna
Another solution is to do like this:
另一种解决方案是这样做：
span { font-weight: bold; letter-spacing: -5px}
<span>=></span>
looks like this: =>
看起来像这样：=>
(looks better when style gets applied, which it doesn't seem to do here)
（应用样式时看起来更好，这里似乎没有这样做）
回答by SpliFF
You have plenty of options.
你有很多选择。
- Option 1: Webdings font : http://en.wikipedia.org/wiki/Wingdings
- Option 2: Custom downloadable CSS font
- Option 3: Over-sized/High-res image scaled down
- Option 4: SVG inline or as image
- Option 5: Any of the above rotated using CSS transforms
- 选项 1：Webdings 字体：http: //en.wikipedia.org/wiki/Wingdings
- 选项 2：自定义可下载 CSS 字体
- 选项 3：缩小超大/高分辨率图像
- 选项 4：内联 SVG 或作为图像
- 选项 5：以上任何使用 CSS 变换旋转
Option 2 is probably the most reliable. Option 5 is support in IE7 using MS vendor extensions like filters and writing-mode.
选项 2 可能是最可靠的。选项 5 在 IE7 中使用 MS 供应商扩展（如过滤器和写入模式）支持。
.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;
}
