CSS3箭头

箭头示例

web网页设计和开发的过程中，经常会接触到箭头，用来指引用户的交互行为，多用于展开子菜单，比如下面的网页截图中：

arrow_default.png

这种箭头的制作方法通常有两种：

• 图片：使用这种方式的网站最多，将小图标放入一个集合图片中，用background-position来控制，通常叫css sprite(css精灵)。
• 字体：使用自定义字体来代替特殊的字符。
  ps:这种方式不是本文重点，详情请参考：Font-awesome 。
  相对于图片的方式，自定义字体的优势很明显，便于维护，不费吹灰之力就可以控制字体的颜色、大小；而缺点就是需要更多的设计成本。
• 而对于设计“简单”的箭头，即常见的、如前面截图所示那种，我们可以用CSS3来实现，原理就是：把它看做只有两个边框的元素，再旋转45度。旋转需要使用CSS3中，transform：rotate():

div{
    width: 200px;
    height: 200px;
    background: rgba(255, 0,0,0.1);
    border-color:red;
    border-width: 0 0 2px 2px;
    border-style: solid;
    transform:rotateZ(-45deg);  
}

实际运用中，应该将背景色置为透明transparent，这里为了演示，将背景设为与边框相同的颜色并将透明的度设为0.1来对比。border-width就决定了箭头的厚度，将具有左和下边框的正方形逆时针旋转45度就完成了，效果如图：

90°箭头示例.png

那么，如果做90°之外的箭头，CSS可行吗？

常见的箭头设计是大于90°的，在上面例子的基础上，“压扁”或“拉长”矩形不就可以了吗?而“压扁”或“拉长”需要用skew()就能实现，只不过需要做些角度的计算。接下来，我要使用less来制作，因为我们需要将需求中的箭头角度和边长作为变量来写css，从而便于维护和减少计算。

首先，我们按照200px长，120°的需求来定义边长、角度两个变量：

@arrow_length: 200px;
@arrow_angle: 120deg;

接着，在上面90°直角箭头的例子基础上，用skew来扭曲出来要求的120°角度。 ps:skew的详细用法请参考文章最后的拓展链接。

transform: skewX(30deg);

为什么是30°呢？请看下面的图解，它会让你仿佛回到初中的数学课堂里。

height计算.png

skew扭曲之后，相应的height应该根据角度而减小，从而让菱形的变成相等。那么,如图所示，height=widht*cos30°.
这样，我们就做出来120度的箭头了，接下来你也应该知道怎么做了，就是让其rotate(旋转)到要求的角度就完成了。一般的箭头设计是向下的，根据上一步，我们要逆时针旋转30度就可以得到向下的箭头,在这里请允许我不再详细用数学知识解释为什么是逆时针30度了，你可以自己动手试试，我做这步的时候就是懒得去算，而是直接在浏览器中调试所得。ps记得要先rotate再skew.

transform: rotate(-30deg) skewX(30deg);

最终效果图：

自定义角度箭头.png

如果你需要查看、使用甚至编辑完整的代码，请点击 这里,访问我的github。你可以尝试制作一个less函数，将角度、边长，方向，厚度四个参数来确定一个箭头。

箭头这种接近盒模型的图型建议使用CSS来实现，便于维护，而且能加强开发者对浏览器渲染盒模型和CSS3特性的理解和联想能力。
有一次我想做一个“随身听”来播放音乐，考虑到响应式得时候我就想：“能不能不切图，只用CSS实现？”，经过一番努力与研究，真的做出来了，效果几乎能与图片睥睨，却适应任何的设备浏览器宽度。这里是演示：CSS音乐播放器。

---

参考:CSS3-transform，less函数， less中calc的方式， 余弦定理。是的，你没看错，就是余弦定理-我认为这个例子最难知识点。