CSS绘制三角形和箭头
Posted mrt-yyy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
以上是关于CSS绘制三角形和箭头的主要内容，如果未能解决你的问题，请参考以下文章