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

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

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

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

作者: caochao
邮箱: caochao88@gmail.com
出处: http://www.cnblogs.com/tudas
本文版权归作者和博客园共有,欢迎转载,未经作者同意须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

如果您觉得本文的内容对您的学习有所帮助: 捐助共勉
原文地址:https://www.cnblogs.com/tudas/p/css_arrow.html