今天网站的时候忘记三角形怎么画的了,写下这篇博客长点记性;网上有多种实现方式,但我觉得这种最好记;
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一样了
时间: 2024-10-19 09:24:01