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就是角度单位度。
使用
当然,其他任意方向也是可以的,只需要控制旋转角度rotate即可。原理是构造了一个正方形,隐藏了其中的两条边left和bottom,然后进行旋转。
通过使用正方形左下两条边,并向下向右平移,再旋转,得到一个向下并居中的箭头