Question

有没有办法只使用html和css创建4个向上，向下，向左和向右的粗箭头？使用s和边框创建箭头的茎很容易......这是箭头的对角线，我不知道该怎么做。

我需要这个在IE7 +和所有现代浏览器中工作。我使用jQuery并很乐意依赖它。这必须与其他html元素紧密集成，所以我不想使用像Raphael这样的东西来绘制它。图像存在问题，因为它们很难平滑放大。

我尝试了箭头的unicode字符（html实体⇦，⇧，⇨和⇩）。这将是一个解决方案，但它们在每个浏览器中的呈现方式都非常不同。其他问题包括无法至少使箭头内部不透明。

理想情况下，我可以用渐变填充箭头。

Answer 1

你试过这些箭吗？

↑↓←→↔↕

Unicode：2190 - ＆gt; 2195

Answer 2

您仍然可以使用⇦，即您在问题中指定的那个。

如果您希望它们显得更大，请使用css更改字体大小。

http://jsfiddle.net/yd9gf/

另外
仅使用css构建;）http://jsfiddle.net/xJrpq

这是css版本的代码

<强> 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 3

在这种情况下我可能会选择svg并且为了满足您对IE 7的要求，我会使用vml作为后备。有svg到vml的转换工具。此外，两者的工作方式与图像类似，但在使用缩放时效果并不差，因为它们是矢量图形。

如果此路径吸引您，请查看此处： http://vectorconverter.sourceforge.net/

Answer 4

使用可能由精灵组成的图像。

当下载其他解决方案文件时，您可能与优化图像的大小相同或更大。无论如何，图像完全可靠，适用于所有浏览器;一个深奥的解决方案，虽然有趣的创造，可能是一个支持噩梦（没有人在互联网上抱怨，所以你不知道它什么时候坏了）。

Answer 5

这个问题得到了很好的回答，但是简单的代码如：▼（那是＆＃9660;）

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/25ba/index.htm

http://www.fileformat.info/info/unicode/char/25c4/index.htm

Answer 6

简短

使用HTML代码

→（→或→）
←（←或←）
↑（↑或↑）
↓（↓或↓）

示例： a→b→c
上面示例的代码是a→b→c

如果您想要更多这样的代码，请参阅：http://character-code.com/arrows-html-codes.php

希望它有所帮助。

Answer 7

你也可以尝试将两个盒子旋转成钻石，然后在它们后面创建一个矩形设置边框也是1px

Answer 8

你有很多选择。

选项1：Webdings字体：http://en.wikipedia.org/wiki/Wingdings
选项2：自定义可下载的CSS字体
选项3：按比例缩小超大/高分辨率图像
选项4：SVG内嵌或图像
选项5：使用CSS转换的任何上述转换

选项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;
}

Answer 9

另一种解决方案是这样做：

span { font-weight: bold; letter-spacing: -5px}

<span>&#61;&#62;</span>

看起来像这样：=＆gt;

（在应用样式时看起来更好，这里似乎没有这样做）

仅使用HTML / CSS创建粗箭头

9 个答案:

简短