jquery - 仅使用 HTML/CSS 创建粗箭头

Question

有没有办法只使用 html 和 css 创建 4 个指向上、下、左、右的粗箭头？使用 s 和边框创建箭头的主干非常容易...我不知道该怎么做的是箭头头部的对 Angular 线。

我需要它在 IE7+ 和所有现代浏览器中工作。我使用 jQuery 并乐于依赖它。这个得和其他html元素紧密结合，所以我不想用Raphael之类的东西来画。图片有问题，因为它们很难平滑地放大。

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

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

Answer 1

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

如果您想让它们显得更大，请使用 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;
}