css/less畫三角形

標籤：部落格   忘記   高度   class   hid   樣式   hidden   ie6   ash   

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

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一樣了

 

css/less畫三角形