当然，其他任意方向也是可以的，只需要控制旋转角度rotate即可。原理是构造了一个正方形，隐藏了其中的两条边left和bottom，然后进行旋转。
通过使用正方形左下两条边，并向下向右平移，再旋转，得到一个向下并居中的箭头
<style>.arbox{position: relative}
.arr{
width: 0
height: 0
overflow: hidden
border-width: 10px
border-style:dashed dashed dashed solid
border-color:transparent transparent transparent #b2c1db
position: absolute
left: 15px
}
.block {
background-color: #b2c1db
height: 12px
left: 3px
overflow: hidden
position: absolute
top: 4px
width: 12px
}
</style>
<div class="arbox">
<div class="arr"></div>
<div class="block"></div>
</div>
你可以做一个带箭头的div；然后样式如下：div
{
/* 箭头的样式，你自己设计，下面是旋转的样式*/
transform:rotate(90deg)
-ms-transform:rotate(90deg)/* Internet Explorer */
-moz-transform:rotate(90deg)/* Firefox */
-webkit-transform:rotate(90deg)/* Safari 和 Chrome */
-o-transform:rotate(90deg)/* Opera */
}
这个是CSS3，所以浏览器并不是都兼容的。上面的deg就是角度单位度。
