之前写了怎么使用纯css制作一个三角形，但是如果要一次性写很多的三角形，而且三角形的朝向不一样，再用传统的写法肯定很麻烦了，而且代码也看起来比较相似，怎么避免做大量的无用功呢，这里我们可以试试less语法中的匹配模式，通过我们传入的参数，比如三角形的朝向（是top、bottom、left 还是right），三角形的宽度以及三角形的颜色是什么颜色，就可以了批量制作大量的三角形了，具体代码如下：

这里就定义一个.trangle三角形的类的样式：

下面来定义三角形的方向，这里需要注意的是，因为我是使用的border属性制作三角的，所以给它添加颜色都是往它相反的放向添加，比如设置三角形朝上的话，就的让它的下边框显示带颜色，这样它就是朝上的了，同样朝下就要设上，左设右，右设左，翻过来盖就行了；

朝上的三角形：

.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;
}

举个调用的栗子吧：

• 匹配上面的类，制作一个朝左、 10px 、 绿色的三角，如下：

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

当然上一篇也写了制作三角形，还要加上一个属性来解决IE6下的最小高度，以及设置它的宽高为零，这些我们没必要每写一个实例就给他加上上面这些属性，less中的匹配也帮我们解决的这个问题

// 不管你匹配到哪个，它都会默认带上下面的代码
.triangle(@_, @width: 5px, @color: red) {
    width: 0;
    height: 0;
    overflow: hidden;
}

这样我们在实例化一个三角形的时候就不用在加上那些相同的代码；

注意：

• @_是固定写法，它的意思就是不管你匹配到哪个，top也好，left也罢，它都会默认带上它本身共有的样式，这个共有样式是自己定义的，比如上面的width: 0; height: 0; overflow: hidden;；
• 如果后面你还定义了其他参数，一定要都带上，不然会报错；
  • 就比如上面，@_后面你需要将你定义的参数 @_, @width: 5px, @color: red都带上；

实例1： 制作一个朝上，15px，蓝色的三角

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

编译结果：

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

匹配模式，相当于less中的混入加if判断，如果匹配不到的话，就输出共有的样式，没有要匹配对应的样式

举个栗子：

.triangle_test {
    .triangle(up);
}

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

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