之前寫了怎么使用純css制作一個(gè)三角形，但是如果要一次性寫很多的三角形，而且三角形的朝向不一樣，再用傳統(tǒng)的寫法肯定很麻煩了，而且代碼也看起來比較相似，怎么避免做大量的無用功呢，這里我們可以試試less語法中的匹配模式，通過我們傳入的參數(shù)，比如三角形的朝向（是top、bottom、left 還是right），三角形的寬度以及三角形的顏色是什么顏色，就可以了批量制作大量的三角形了，具體代碼如下：

這里就定義一個(gè).trangle三角形的類的樣式：

下面來定義三角形的方向，這里需要注意的是，因?yàn)槲沂鞘褂玫腷order屬性制作三角的，所以給它添加顏色都是往它相反的放向添加，比如設(shè)置三角形朝上的話，就的讓它的下邊框顯示帶顏色，這樣它就是朝上的了，同樣朝下就要設(shè)上，左設(shè)右，右設(shè)左，翻過來蓋就行了；

朝上的三角形：

.triangle(top, @width: 5px, @color：red) {
    border-width: @width;
    border-color: transparent transparent @color transparent;
    border-style: dashed dashed solid doshed;
}

朝右的三角形：

.triangle(right, @width: 5px, @color：red) {
    border-width: @width;
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed doshed solid;
   
}

朝下的三角形：

.triangle(bottom, @width: 5px, @color：red) {
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed doshed;
}

朝左的三角形：

.triangle(left, @width: 5px, @color：red) {
    border-width: @width;
    border-color: transparent  @color transparent transparent;
    border-style: dashed solid dashed  doshed;
}

舉個(gè)調(diào)用的栗子吧：

• 匹配上面的類，制作一個(gè)朝左、 10px 、 綠色的三角，如下：

    .triangle_left_demo {
        width: 0;
        height: 0;
        overflow: hidden;
        .triangle(left, 10px, green);
    }

當(dāng)然上一篇也寫了制作三角形，還要加上一個(gè)屬性來解決IE6下的最小高度，以及設(shè)置它的寬高為零，這些我們沒必要每寫一個(gè)實(shí)例就給他加上上面這些屬性，less中的匹配也幫我們解決的這個(gè)問題

// 不管你匹配到哪個(gè)，它都會(huì)默認(rèn)帶上下面的代碼
.triangle(@_, @width: 5px, @color: red) {
    width: 0;
    height: 0;
    overflow: hidden;
}

這樣我們在實(shí)例化一個(gè)三角形的時(shí)候就不用在加上那些相同的代碼；

注意：

• @_是固定寫法，它的意思就是不管你匹配到哪個(gè)，top也好，left也罷，它都會(huì)默認(rèn)帶上它本身共有的樣式，這個(gè)共有樣式是自己定義的，比如上面的width: 0; height: 0; overflow: hidden;；
• 如果后面你還定義了其他參數(shù)，一定要都帶上，不然會(huì)報(bào)錯(cuò)；
  • 就比如上面，@_后面你需要將你定義的參數(shù) @_, @width: 5px, @color: red都帶上；

實(shí)例1： 制作一個(gè)朝上，15px，藍(lán)色的三角

.triangle_top_demo {
    .triangle(top, 15px, blue);
}

編譯結(jié)果：

.triangle_top_demo {
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 15px;
    border-color: transparent transparent blue transparent;
    border-style: dashed dashed solid dashed;
}

匹配模式，相當(dāng)于less中的混入加if判斷，如果匹配不到的話，就輸出共有的樣式，沒有要匹配對(duì)應(yīng)的樣式

舉個(gè)栗子：

.triangle_test {
    .triangle(up);
}

輸出如下：匹配不到up，只輸出.triangle的公用樣式

.triangle_test {
     width: 0;
    height: 0;
    overflow: hidden;
}