css/less畫三角形

今天網站的時候忘記三角形怎麼畫的了，寫下這篇博客長點記性；網上有多種實現方式，但我以爲這種最好記；

css以下：

.div{
    width: 0;
    height: 0;
    overflow: hidden; //overflow解決ie6下最小高度的問題
    border-width: 10px;  //決定三角形的大小
    border-color: red transparent transparent transparent;  //那邊朝下就把那邊設顏色，其他透明
    border-style: solid dashed dashed dashed;  //dashed解決ie6下黑邊的方法  
}

 

 less以下：（這裏是less匹配模式的知識）

.div1(top,@w:10px,@c:red){
    border-width:@w; 
    border-color:@c transparent transparent transparent;
    border-style:solid dashed dashed dashed;
}
.div1(@_,@w:10px,@c:red){  //@_的意思是匹配到上面的樣式（後面的參數必定要一致）；
    width: 0;
    height: 0;
    overflow: hidden;
}

.div{.div1(top);}  //渲染出來就和上方的css同樣了