使用HTML/CSS创建一个粗箭头

7
有没有一种只使用html和css就能创建4个粗箭头,指向上、下、左和右的方法?很容易使用s和边框创建箭头的干茎部分...我不知道如何做箭头头部的对角线。
我需要在IE7+和所有现代浏览器中运行。我使用jQuery,并乐于依赖它。这必须与其他html元素密切集成,因此我不想使用像Raphael之类的东西来绘制它。图像存在问题,因为它们难以平稳缩放。
我尝试了箭头的Unicode字符(html实体⇦,⇧,⇨和⇩)。这本来是一个解决方案,但它们在每个浏览器中呈现非常不同。使用此方法的其他问题包括不能至少使箭头内部不透明。
理想情况下,我可以用渐变填充箭头。

3
只使用CSS来构建 ;) http://jsfiddle.net/xJrpq/ - Clyde Lobo
@Clyde:你应该把它发布为答案。不过你的示例可能不会缩放得很好(因为你使用了像素单位)。 - T.J. Crowder
@Clyde,哇!我不明白那个CSS是怎么工作的!? - at.
1
边角是斜接的。 - T.J. Crowder
@T.J:如果使用的单位是 em 呢? 另外,我在我的答案中添加了评论。 - Clyde Lobo
这是一个很好的资源,可以检查更多常用的特殊字符:http://danshort.com/HTMLentities/index.php?w=dingb - Daan
9个回答

4

你仍然可以使用,即你在问题中指定的那个。

如果你希望它们看起来更大,可以使用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;
}

jsfiddle可以移动、消失等;始终在您的答案中包含实际代码;fiddle可以是一个不错的附属品。聪明的方法,使用边框角的斜接,我不知道它在非像素单位下能否很好地工作,但是嘿,你永远不知道。 - T.J. Crowder
我不知道你的第二种技术,我可以用渐变来填充箭头吗?我可以有边框吗?我想我可以通过在下面放一个稍微大一点的箭头来实现。 - at.
5
h1 标签包裹它们真的非常糟糕,会影响语义。 - Lea Verou
尽管我最终没有使用这个解决方案,但你的技巧非常棒,我已经将它存储在我的脑海中...所以我要给你答案的功劳。 - at.

4
你试过这些箭头吗?
↑↓←→↔↕

Unicode : 2190 -> 2195


@all:FWIW:对我来说,这些箭头在IE6(Windows 2000)、IE7(Windows XP)、IE8(Windows 7)、Safari 5(Windows 7)以及Chrome 10、Firefox 3.6和Opera 11上的Windows 7和Ubuntu 10.04 LTS上看起来几乎一样。OP问题中的箭头在IE6/Win2k和IE7/WinXP上呈现为空白框(缺少字符)。它们在其他所有浏览器上都呈现为未填充的箭头,尽管它们在Safari/Win7中看起来非常糟糕。因此,Réjôme的箭头更加一致,并且按要求填充(尽管没有渐变)。 - T.J. Crowder
我想要粗箭头,不填充也可以,但至少内部需要是不透明的。 - at.

3

简短明了

使用HTML代码

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

例子: a→b→c
以上例子的代码是 a&#8594;b&#8594;c

如果你想要更多类似的代码,请参考: http://character-code.com/arrows-html-codes.php

希望这能帮到你。


1

我本来想要一个箭头而不是三角形...最终我使用了斜接边框角,虽然不是理想的选择(阴影效果不正确,渐变和不同的边框也无法正常工作),但它完成了工作... - at.

1

在这种情况下,我可能会选择使用svg,并为了满足IE 7的要求,我会使用vml作为备选方案。有一些将svg转换为vml的工具。此外,两者都类似于图像,但在使用缩放时不会显得很糟糕,因为它们是矢量图形。

如果您对此感兴趣,请查看这里: http://vectorconverter.sourceforge.net/


我能否轻松地在SVG/VML中使用投影和边框?这是Clyde提供的斜接角示例中唯一的问题。 - at.

1

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

在下载其他解决方案文件时,您可能会达到与优化图像相同或更大的大小。无论如何,图像是完全可靠的,并且适用于所有浏览器;一个神秘的解决方案虽然很有趣,但可能会成为支持的噩梦(因为在互联网上没有人抱怨,所以当它出现问题时,你不会知道)。


0

你有很多选择。

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

我能在IE8中使用CSS转换吗? - at.
等价物是可以的,看我的编辑。我以前用过,参见http://www.inwardpath.com.au/。 - SpliFF
上面的代码示例适用于90度旋转。对于45度,有一个MS过滤器(但使用起来很困难)。 - SpliFF

0
你可以尝试将两个方框旋转成菱形,然后在它们后面创建一个矩形,并将边框设置为1像素。

我能轻松地旋转框以兼容至少IE8吗? - at.

0

另一种解决方案是这样的:

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

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

看起来是这样的:=>

(当应用样式时,它会变得更好看,但似乎在这里没有应用样式)


使用这个解决方案,您只能做两个箭头:向左和向右。其他的箭头如何处理:指向上和下? - Barnee
是的,我也考虑过这个问题...如果想要使用“字符”而不是进行字体下载或图像处理,可以使用Writing-Mode/Filter/Rotate/Transform。这样可以保持快速渲染和可维护性(只有在Unicode版本无法工作的旧浏览器上才需要此解决方案)。 - PellePenna

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接