新浪微博评论界面如下，注意右上角的箭头符号。
看了看其箭头符号的实现方法，发现是用一个<em>元素加一个特殊符号制作的
于是就想用html元素来实现同样的效果，在实验过程中发现了一种方法达到目标，代码如下：
<style type="text/css">
div.arrow
{
width:0px;
height:0px;
border-bottom:50px solid #F00;
border-left:50px solid #fff;
border-right:50px solid #fff;
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>
效果请看demo:http://wandouyouxi.com/cnblogs/css/untitled-1.html
在这种效果中，可以分别制作出向前后左右四个方向的箭头。例如向上的箭头，只要在css中设置border-bottom，然后设置左右border为白色即可。同理向右的箭头，需要设置border-right，然后将上下border为白色。
最后，要说明的是，我对这种方法的原理还不太清楚。如下图所示，
为何在设置了下边框的情况下再去设置左边框，左边框会覆盖下边框，但是为什么分界的地方是斜线呢？去w3c看了下边框的定义：
还是不明白上面提出的疑问，请知道的园友们不吝赐教。
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
