用css绘制三角形原理其实很简单,用到的是border-color,这个属性可以设置四条边框的颜色:
border-color:red green blue pink;
- 上边框是红色
- 右边框是绿色
- 下边框是蓝色
- 左边框是粉色
我们来把一个盒子宽高都设置为0,只给边框:
html:
<i class="caret-con"></i>
css:
i{
display: block;
margin-top: 30px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
}
.caret-con{
border-color: #f99 #333 #fca #f23;
}
效果如下:
所以我们绘制三角形只需要给一个方向的边框颜色就可以了。代码示例:
html:
<i class="caret-top"></i>
<i class=