今天注意到人和网的首页幻灯片上的一个小细节，就是下图上的这个小箭头。最初我以为是用一张小图片实现的。用firbug查看发现竟然不是，顿时激起了我的好奇心。
它的代码是这样的：
于是，我自己做了个测试：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小箭头</title>
<style>
body{
margin:0;
padding:0;
}
.arrow{
display:inline-block;
border:8px solid;
border-color:#fff #fff #f00 #fff;
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>
</html>
成功实现。具体原理要从box盒状模型说起了，box盒装模型的宽度L = width + padding + border + margin，即总宽度=上外边距+上边宽+上内边距+宽度+下内边距+下变宽+下外边距。
在这里我们没有定义内边距和外边距，只定义了宽为8px的变宽，上边宽8px+下变宽8px=总宽度16px。当我们把左变宽、上变宽、右边宽的颜色设为白色，下变宽设为红色的时候，就显示出如上图的效果了。
Ps：必须给它写上display:inline-block或者display:inline，因为div的性质是块,它会自己占据一行。除非脱离文档流，使其没有一行的概念（人和网是用了绝对路径脱离了文档流，用浮动float同样可以实现）。
否则效果会跟下图一样：
IE6/7对支持display:inline-block和display:inline不友好，建议通过脱离文档流的方法解决块元素占一行的问题。附“IE6/7下不同的inline-block“。
Demo下载：http://pan.baidu.com/share/link?shareid=88273&uk=3221702211