用css写的箭头

style type="text/css">
.arrow{display:inline-block;border:10px solid;width:0px;height:0px;vertical-align:middle;}
.arrow-top{
    border-top-color:#f00;border-top-width:15px;
    border-right-color:rgba(0,0,0,0);border-right-width:10px;
    border-bottom-color:rgba(0,0,0,0);border-bottom-width:0;
    border-left-color:rgba(0,0,0,0);border-left-width:10px;
    }

.arrow-bottom{
    border-top-color:rgba(0,0,0,0);border-top-width:0;
    border-right-color:rgba(0,0,0,0);border-right-width:10px;
    border-bottom-color:#f00;border-bottom-width:15px;
    border-left-color:rgba(0,0,0,0);border-left-width:10px;
    }

.arrow-right{
    border-top-color:rgba(0,0,0,0);border-top-width:10px;
    border-right-color:#f00;border-right-width:15px;
    border-bottom-color:rgba(0,0,0,0);border-bottom-width:10px;
    border-left-color:rgba(0,0,0,0);border-left-width:0;
    }

.arrow-left{
    border-top-color:rgba(0,0,0,0);border-top-width:10px;
    border-right-color:rgba(0,0,0,0);border-right-width:0;
    border-bottom-color:rgba(0,0,0,0);border-bottom-width:10px;
    border-left-color:#f00;border-left-width:15px;
    }
</style>

 pasting

<div class="arrow arrow-top"></div>上箭头
<div class="arrow arrow-bottom"></div>下箭头
<div class="arrow arrow-left"></div>左箭头
<div class="arrow arrow-right"></div>右箭头