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