前端开发中箭头形状的制作及对边框定义的一些疑问

新浪微博评论界面如下，注意右上角的箭头符号。

看了看其箭头符号的实现方法，发现是用一个<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看了下边框的定义：

还是不明白上面提出的疑问，请知道的园友们不吝赐教。

posted @ 2011-12-31 23:17  caochao88  阅读(955)  评论(2)  编辑  收藏  举报