纯CSS写三角形-border法

参考地址：http://www.cnblogs.com/blosaa/p/3823695.html
最近有做这种



.thirdsTrangleUp:after, .thirdsTrangleDown:after {

position: absolute;

content: '';

display: block;

width: 0;

height: 0;

left: 50%;

margin-left: -14px;

border-style: solid;

}

.thirdsTrangleDown:after {

top: -14px;

border-width: 0 14px 14px;

border-color: transparent transparent #fff;

}

.thirdsTrangleUp:after {

bottom: -14px;

border-width: 14px 14px 0;

border-color: #fff transparent transparent;

z-index: 3;

}

.thirdsContent:hover.thirdsTrangleDown:after {

border-color: transparent transparent #33437e;

}



更多的就参看顶部地址里面的例子