用css属性实现箭头

用css属性实现箭头（作垂直导航栏有的时候可以用上）

原理：通过截取border的部分拐角实现。

l        当宽，高，边框宽相近（相等）时，改变某一边的颜色可看到一个梯形。

例一<div id=”demo1”></div>

<Style>

#demo1{

Border:10px solid black;

Width:10px;

Height:10px;

Border-left-color:red;

}

</style>

l        当元素宽高为0时，且其他边为透明色时，可以形成一个三角形。但为了精确定位，让三角形显示在合适位置，会使用position。例如下面所示程序代码。

.left{
    display:block;
    border:8px solid transparent;
    width:0;
    height:0;
    border-left-color:red;
    position:absolute;
    left:-8px;
    top:0;
}
.right{
    display:block;
    border:8px solid transparent;
    width:0;
    height:0;
    border-right-color:red;
    position:absolute;
    right:-8px;