今天网站的时候忘记三角形怎么画的了,写下这篇博客长点记性;网上有多种实现方式,但我以为这种最好记;css
css以下:less
.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同样了