html和css画直线箭头,CSS绘制三角形和箭头

CSS绘制三角形和箭头

.d2 {

width: 0;

height: 0;

border-width: 100px;

border-style: solid;

border-color: #FFCCCC #0099CC #996699 #339933;

}

.d3 {

width: 0;

height: 0;

border-width: 50px;

border-style: solid;

border-color: transparent transparent transparent #FFCCCC;

}

.left {

position: absolute;

}

.left:before,

.left:after {

position: absolute;

content: '';

border-top: 10px transparent dashed;

border-left: 10px transparent dashed;

border-bottom: 10px transparent dashed;

border-right: 10px #fff solid;

}

.left:before {

border-right: 10px #0099CC solid;

}

.left:after {

left: 3px;

/*覆盖并错开1px*/

border-right: 10px #fff solid;

}

标签：width,solid,绘制,箭头,10px,border,transparent,CSS,left

来源： https://www.cnblogs.com/yanjianjiang/p/13686570.html