用border构建三角形

发表于 | 分类于

利用border构建三角形

方案一

1
2
3
4
5
6
.triangle{
    border-width:12px 20px;
    border-style:solid;
    border-color:red red transparent transparent;
    font-size:0;
}
1
<a href="" class="triangle"></a>//要使用行内元素

方案二

1
2
3
4
5
6
7
.triangle{
    width:0px;
    height:0px;
    border-width:100px;
    border-style:solid;
    border-color:red transparent transparent transparent;
}
1
<div class="triangle></div>