码迷,mamicode.com
首页 > Web开发 > 详细

css/less画三角形

时间:2017-08-12 18:13:37      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:博客   忘记   高度   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画三角形

标签:博客   忘记   高度   class   hid   样式   hidden   ie6   ash   

原文地址:http://www.cnblogs.com/lqzweb/p/7350894.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!