用另外一个元素包裹一下就可以了, 代码如下
<span class="arrow down"><div></div>
</span>
样式代码如下
.arrow{display:inline-block
width:60px
height:40px
}
.arrow div{
width:0
height:0
border-left:30px solid transparent
border-right:30px solid transparent
}
.arrow.down div{
border-top:40px solid #666666
border-bottom:none
}
.arrow.up div{
border-top:none
border-bottom:40px solid #666666
}
测试用的js(jquery)代码如下
$(".arrow").click(function (){if($(this).hasClass("down")){
$(this).removeClass("down").addClass("up")
}
else{
$(this).removeClass("up").addClass("down")
}
})
附件是完整代码
首页要有这人箭头的背景图，然後放到DIV中，再在DIV中设置一个Table样式为border-collapse:collapse
border='1'
j最后就是把背景图压到表格的上边框中
具体的座标，这个要用Javascript去自己实现
