利用css的border的style,width,color三个属性制作小三角和小箭头,颜色大小想怎么变就怎么变，不用担心使用图片失真等问题。
需要注意的是left,right,投票,bottom,这4个方位,需要一定的空间想象力,记住一个,其他的可以自己推算出来
transparent表示透明
小三角:
HTML结构
<div class="left"></div><div class="top"></div><div class="right"></div><div class="bottom"></div>
CSS样式
div {width: 0px;height: 0px;}
.left {
border-width: 20px;
border-style: solid;
border-color: transparent red transparent transparent;
}
.top {border-width: 20px;border-style: solid;border-color: transparent transparent red transparent ;}
.right {
border-width: 20px;
border-style: solid;
border-color: transparent transparent transparent red;
}
.bottom {border-width: 20px;border-style: solid;border-color: red transparent transparent transparent ;}
小箭头
左箭头
.left {
position: absolute;
}
.left:before,.left:after {position: absolute;content: '';border-top: 20px transparent dashed;border-left: 20px transparent dashed;border-bottom: 20px transparent dashed;border-right: 20px #fff solid;}.left:before {border-right: 20px #f00 solid;}.left:after {/* 覆盖并错开1px */left: 1px;border-right: 20px #fff solid;}
右箭头
.right {
position: absolute;
}
.right:before,.right:after {position: absolute;content: '';border-top: 20px transparent dashed;border-left: 20px #fff solid;border-bottom: 20px transparent dashed;border-right: 20px transparent dashed;}.right:before {border-left: 20px #f00 solid;}.right:after {/* 覆盖并错开1px */left: -1px;border-left: 20px #fff solid;}
上箭头
.top {position: absolute;}.top:before,.top:after {position: absolute;content: '';border-top: 20px transparent dashed;border-left: 20px transparent dashed;border-bottom: 20px #fff dashed;border-right: 20px transparent solid;}.top:before {border-bottom: 20px #f00 solid;}.top:after {/* 覆盖并错开1px */top: 1px;border-bottom: 20px #fff solid;}
下箭头
.bottom {
position: absolute;
}
.bottom:before,.bottom:after {position: absolute;content: '';border-top: 20px #fff solid;border-left: 20px transparent dashed;border-bottom: 20px transparent dashed;border-right: 20px transparent dashed;}.bottom:before {border-top: 20px #f00 solid;}.bottom:after {/* 覆盖并错开1px */top: -1px;border-top: 20px #fff solid;}
