CSS绘制三角形和箭头

三角形

.sanjiaoxing{
position: relative;
top: 3px;
display: inline-block;
margin-left: 8px;
width: 0;
height: 0;
border-width: 5px;  //宽度
border-style: solid;
border-color: #BBBBBB transparent transparent transparent;      //方向
}

 

箭头
.arrTop{
position: absolute;
}
.arrTop:before,.arrTop:after{
position: absolute;
content: '';
border-top: 8px transparent dashed;
border-left: 8px transparent dashed;
border-right: 8px transparent dashed;
border-bottom: 8px #fff solid;
}
.arrTop:before{
border-bottom:8px rgba(200, 200, 200, 1) solid;
}
.arrTop:after{
top: 1px; /*覆盖并错开1px*/
border-bottom:8px #fff solid;
}

 

 

.arrBottom{
position: absolute;
}
.arrBottom:before,.arrBottom:after{
position: absolute;
content: '';
border-bottom: 8px transparent dashed;
border-left: 8px transparent dashed;
border-right: 8px transparent dashed;
border-top: 8px #fff solid;
}
.arrBottom:before{
border-top:8px rgba(200, 200, 200, 1) solid;
}
.arrBottom:after{
top: -1px; /*覆盖并错开1px*/
border-top:8px #fff solid;
}

转载于:https://www.cnblogs.com/mrt-yyy/p/11517690.html