你真的懂 border 么?

其实提出这个话题,主要是最近在绘制三角形,包括一些带有斜角的图形,总能看到网上一系列教程,通过border-top,border-bottom,border-left,border-right 来设置,你总是能看到大神们都是使用这几个简单的属性就把三角形,梯形等绘制出来

如:朝上的三角形

代码如下:

图1.朝上三角形css代码 图2.朝上三角形

通过上面的代码能清晰的看到这里使用的就是简单的border 属性,作为看完代码的我总是不能理解为何会出现所谓的斜边出来,通过一定理解之后我明白了原理, 原来在border-bottom 与 border-left (或boder-right)之间他们是有相交的地方的,平常我们可能只使用border来绘制边框,没有发现,这一特征,所以在交汇的地方,他们是以各自的边为终点,同时又以相交点作为分界线进行区分的.

下面我将以一个鲜明的例子来说明这一特征.

图3.讲解图

看到这个图我想你们应该已经知道我要说什么了,没错,这就是使用border-left,border-top,border-right ,且分别使用不同的三种颜色来区分,从这里可以清晰的看出,上边框的与左右两个边框都有重叠的部分,相对于重叠部分,他们就是以他们的两个相交点,所组成的一条斜线作为分界线的.

图4为讲解图的css代码.

图4.讲解图css 代码

可能语言组织的不是很好,但我相信大家都能看懂.(知道这个原理之后,相信大家对border有了更清晰的认识)