用CSS实现的箭头

1.一个梯形

当元素的宽、高和框的宽相近（等）时，改变某一边的颜色，可以得到一个梯形。

<div id="demo1"></div>

<style>

    #demo1{

    boder:10px solid #ccc;

border-left-color:#ccc;

width:10px;

height:10px;

   }

</style>

2.一个三角形

当元素的宽、高等于零时，且其他边都透明室，可以形成一个三角形。

 <div id="demo2"></div>

<style>

    #demo2{

boder:5px solid #ccc;

border-left-colr:#ccc;

width:0;

height:0;

    }

</style>

3.任意角度的三角形

改变各边的宽度，即通过边框厚度即可配置初任意角度。

<div id="demo3"></div>

<style>

    #demo3{

boder:5px solid #ccc;

border-left:10px solid #ccc;

width:0;

height:0;

    }

</style>