原理:当宽度和高度都为0时,整个大小就是由border撑起来的,也就是说每个边组成了一个三角形,当你变换三角形的颜色时,就会得到不同的的箭头甚至其他的图像
<a class="select-box" href="#"></a>
.select-box{
position: relative;
display: block;
width: 200px;
height: 40px;
border: 1px solid red;
}
.select-box:before{
position: absolute;
top: 15px;
right: 6px;
width: 0;
height: 0;
content: '';
border: 10px solid #FFFFFF;
border-top: 10px solid red;
}
效果:
例如:
.select-box:before{
position: absolute;
top: 15px;
right: 6px;
width: 0;
height: 0;
content: '';
border: 100px solid #FFFFFF;
border-top: 80px solid red;
border-bottom: 120px solid #000000;
border-left: 140px solid green;
border-right: 60px solid yellow;
}
.select-box:before{
position: absolute;
top: 15px;
right: 6px;
width: 0;
height: 0;
content: '';
border: 100px solid #FFFFFF;
border-top: 100px solid red;
border-bottom: 100px solid #000000;
border-left: 100px solid green;
border-right: 100px solid yellow;
}
随意变换border的宽度,就能得到你想要的形状