首页 > 代码库 > css/less画三角形

css/less画三角形

2024-11-25 22:43:39   204人阅读

今天网站的时候忘记三角形怎么画的了，写下这篇博客长点记性；网上有多种实现方式，但我觉得这种最好记；

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画三角形


联系
我们