

用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>
<div class="arrow arrow-top"></div>上箭头
<div class="arrow arrow-bottom"></div>下箭头
<div class="arrow arrow-left"></div>左箭头
<div class="arrow arrow-right"></div>右箭头
http://www.ylzx8.cn/web/web/961846.html