仅使用 HTML/CSS 创建粗箭头

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

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

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

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

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

如果您希望它们看起来更大，请使用 css 更改字体大小。

http://jsfiddle.net/yd9gf/ http://jsfiddle.net/yd9gf/

Also
仅使用 css 构建;)http://jsfiddle.net/xJrpq 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;
}