新浪微博评论界面如下,注意右上角的箭头符号。
看了看其箭头符号的实现方法,发现是用一个<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看了下边框的定义:
还是不明白上面提出的疑问,请知道的园友们不吝赐教。