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;
}