大家還在為頁面中新增各種箭頭而煩惱嗎？當然。這些完全可以用圖片代替，但是為了更好的使用者體驗和保證程式碼的簡化上我們完全可以使用css的偽元素來代替，具體做法如下

.le {
  position: relative;
  padding-left: 15px;
  padding-right: 30px;
  height: 2.58823529em;
  min-height: 2.58823529em;
  line-height: 2.58823529em;
  border-right: 1rpx solid #D9D9D9;
}
.le:before {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 0px 0px 2px  2px;
  border-color: #C8C8CD;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 50%;
  right: 10px;
}
 

上面顯示的是左箭頭，如果需要上下左右哪一個可以更改border-width來設定，箭頭的寬高都是可以自己設定的

至於用這種的好處，行家都懂就不言而喻了吧，以上程式碼最難的一點莫過於transform 中的matrix了，至於他的用法大家可以參考簡書上ferrint寫的一片文章，個人感覺很不錯，全文複製過來，節省大家時間

css最為人稱道的優點之一就是增加了transform功能，用它來配黑transition可是不用js就能夠實現優美的動畫效果，css3提供了四種變換方法位移，縮放，旋轉，斜切 簡單演示下效果： * <div class="box"></div>

       /* CSS程式碼 */  

        .box{
            width: 100px;
            height: 100px;
            box-sizing: content-box;
            background-color: #eee;
            border:1px solid #ccc;
            transition: 1s;
        }
        .box:hover{
            
             transform: skew(35deg);    /* 斜切 */  
             transform:scale(1, 0.5);   /* 縮放 */
             transform:rotate(45deg);   /* 旋轉 */
             transform:translate(10px, 20px);  /* 位移 */

        }
 

那這些方法是怎麼實現的呢,其實都是通過矩陣的方式做出來的，

matrix功能實現

一提到矩陣是不是聯想到線性代數啦，突然間好方( ⊙ o ⊙ )啊！其實並不難，用到的都是簡單的矩陣 旋轉、壓縮、斜切等，本質上都是應用的matrix()方法實現的（修改matrix()方法固定幾個值），只是類似於transform:rotate這種表現形式，我們更容易理解，記憶與上手。

寫法是這樣的 * transform: matrix(a,b,c,d,e,f);

六個引數對應的矩陣：

矩陣

其變化的方法：

變換公式

什麼意思呢?

• ax+cy+e表示變換後的水平座標，

• bx+dy+f
  表示變換後的垂直位置。

位移（displace） * transform: matrix(1, 0, 0, 1, 100, 100); /* a=1, b=0, c=0, d=1, e=100, f=100 */

變換後：

• x座標 : ax+cy+e = 10+00+30 =30,

• y座標 : bx+dy+f = 00+10+30 =30.

縮放(scale) * transform: matrix(3, 0, 0, 0.5, 0, 0);

其實就是這樣一個公式

*比例是 s，則有matrix(s, 0, 0, s, 0, 0);第一個s代表x軸，第二個s代表y軸。

• x' = ax+cy+e = sx+0y+0 = s*x;
• y' = bx+dy+f = 0x+sy+0 = s*y;

旋轉(rotate)

* transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0);  // 旋轉30度

• matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

• x' = xcosθ-ysinθ+0 = xcosθ-ysinθ

• y' = xsinθ+ycosθ+0 = xsinθ+ycosθ

拉伸(skew)

* transform: matrix(1,0,0.75,1,0,0);

• matrix(1,tan(θy),tan(θx),1,0,0)

• x' = x+ytan(θx)+0 = x+ytan(θx)
• y' = xtan(θy)+y+0 = xtan(θy)+y