仅使用HTML / CSS创建粗箭头 [英] Create a thick arrow using only HTML/CSS

问题描述

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

我需要这个工作在IE7 +和所有现代浏览器。我使用jQuery和我很高兴依赖它。这必须与其他html元素紧密集成，所以我不想使用像Raphael这样的东西来绘制它。

我尝试了箭头的unicode字符（html实体⇦，⇧，⇨和⇩）。这将是一个解决方案，但它们在每个浏览器中呈现的不同。

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

解决方案

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

如果您希望它们显得更大，只需将它们包装在 h1 标签中，例如

h1>或使用css更改字体大小。

http://jsfiddle.net/yd9gf/

同时

仅使用css编译; http://jsfiddle.net/xJrpq

这里是css版本的代码

HTML

 < div class =b> 
  

CSS

  .b {
 border-top：60px solid transparent; 
 border-bottom：60px solid transparent; 
 border-left：60px solid black; 
 width：0; 
 height：0; 
} 
  

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.

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.

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.

Ideally I can fill in the arrows with a gradient.

解决方案

Well you can still use ⇦ ,i.e the one that you specified in your question.

If you want them to appear bigger, just wrap them around h1 tags for eg

⇦

or change the font-size using css.

http://jsfiddle.net/yd9gf/

Also
Build using css only ;) http://jsfiddle.net/xJrpq

And here is the code for the css version

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

这篇关于仅使用HTML / CSS创建粗箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！