web網(wǎng)頁設(shè)計和開發(fā)的過程中，經(jīng)常會接觸到箭頭，用來指引用戶的交互行為，多用于展開子菜單，比如下面的網(wǎng)頁截圖中：
這種箭頭的制作方法通常有兩種：
- 圖片：使用這種方式的網(wǎng)站最多，將小圖標(biāo)放入一個集合圖片中，用background-position來控制，通常叫css sprite(css精靈)。
- 字體：使用自定義字體來代替特殊的字符。
<em>ps:這種方式不是本文重點(diǎn)，詳情請參考：Font-awesome </em>。
相對于圖片的方式，自定義字體的優(yōu)勢很明顯，便于維護(hù)，不費(fèi)吹灰之力就可以控制字體的顏色、大??；而缺點(diǎn)就是需要更多的設(shè)計成本。 - 而對于設(shè)計“簡單”的箭頭，即常見的、如前面截圖所示那種，我們可以用CSS3來實(shí)現(xiàn)，原理就是：<b>把它看做只有兩個邊框的元素，再旋轉(zhuǎn)45度。</b>旋轉(zhuǎn)需要使用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);
}
實(shí)際運(yùn)用中，應(yīng)該將背景色置為透明transparent，這里為了演示，將背景設(shè)為與邊框相同的顏色并將透明的度設(shè)為0.1來對比。border-width就決定了箭頭的厚度，將具有左和下邊框的正方形逆時針旋轉(zhuǎn)45度就完成了，效果如圖：
</br><h3>那么，如果做90°之外的箭頭，CSS可行嗎？</h3>
常見的箭頭設(shè)計是大于90°的，在上面例子的基礎(chǔ)上，“壓扁”或“拉長”矩形不就可以了嗎?而“壓扁”或“拉長”需要用skew()就能實(shí)現(xiàn)，只不過需要做些角度的計算。接下來，我要使用less來制作，因?yàn)槲覀冃枰獙⑿枨笾械募^角度和邊長作為變量來寫css，從而便于維護(hù)和減少計算。
首先，我們按照200px長，120°的需求來定義邊長、角度兩個變量：
@arrow_length: 200px;
@arrow_angle: 120deg;
接著，在上面90°直角箭頭的例子基礎(chǔ)上，用skew來扭曲出來要求的120°角度。 <em>ps:skew的詳細(xì)用法請參考文章最后的拓展鏈接。</em>
transform: skewX(30deg);
為什么是30°呢？請看下面的圖解，它會讓你仿佛回到初中的數(shù)學(xué)課堂里。
skew扭曲之后，相應(yīng)的height應(yīng)該根據(jù)角度而減小，從而讓菱形的變成相等。那么,如圖所示，height=widht*cos30°.
這樣，我們就做出來120度的箭頭了，接下來你也應(yīng)該知道怎么做了，就是讓其rotate(旋轉(zhuǎn))到要求的角度就完成了。一般的箭頭設(shè)計是向下的，根據(jù)上一步，我們要逆時針旋轉(zhuǎn)30度就可以得到向下的箭頭,在這里請允許我不再詳細(xì)用數(shù)學(xué)知識解釋為什么是逆時針30度了，你可以自己動手試試，我做這步的時候就是懶得去算，而是直接在瀏覽器中調(diào)試所得。<em>ps記得要先rotate再skew.</em>
transform: rotate(-30deg) skewX(30deg);
最終效果圖：
如果你需要查看、使用甚至編輯完整的代碼，<b>請點(diǎn)擊這里,訪問我的github。</b>你可以嘗試制作一個less函數(shù)，將角度、邊長，方向，厚度四個參數(shù)來確定一個箭頭。
箭頭這種接近盒模型的圖型建議使用CSS來實(shí)現(xiàn)，便于維護(hù)，而且能加強(qiáng)開發(fā)者對瀏覽器渲染盒模型和CSS3特性的理解和聯(lián)想能力。
有一次我想做一個“隨身聽”來播放音樂，考慮到響應(yīng)式得時候我就想：“能不能不切圖，只用CSS實(shí)現(xiàn)？”，經(jīng)過一番努力與研究，真的做出來了，效果幾乎能與圖片睥睨，卻適應(yīng)任何的設(shè)備瀏覽器寬度。這里是演示：CSS音樂播放器。
參考:CSS3-transform，less函數(shù)， less中calc的方式， 余弦定理。是的，你沒看錯，就是余弦定理-我認(rèn)為這個例子最難知識點(diǎn)。
