最近在做一个小项目时,前端需要一个三角形形状的样式,就上网搜了一下css三角形教程,按照这些教程来操作,确实能做出符合条件的三角形,但是这些教程大多都是直接提供相应的参数,并没有提及参数的意义以及为什么要这样设置参数,下面我从我自己的使用过程来谈谈我对border的认识
border的基本性质
我们先来看一个运用border的实例:
div
{
width:20px;
height: 10px;
border-style:solid;
border-top-width:20px;
border-top-color:red;
border-right-width:20px;
border-right-color:green;
border-bottom-width:20px;
border-bottom-color:blue;
border-left-width:20px;
border-left-color:orange;
}
我们可以看到,F12显示这个div元素的尺寸是60x50,那么这个60和50是怎么来的呢?
以下边为例:
可以看到,它的边可以划分为三部分,首先是左border的宽度(20px),div的width(20px),以及右border的宽度(20px),所以长为60px。
再以右边为例:
可以看到,右边的长度也可以划分为三部分,首先是上border的宽度(20px),div的height(10px),以及下border的宽度(20px),所以宽为50px
通过上面的分析,我们可以得出一个结论,一个border的长是由三个部分组成的,依赖于这三部分,这三部分值的变化就造成了border形状的变化,我们一开始谈及的三角形,就是令div的width为0:
div
{
width:0px;
height: 10px;
border-style:solid;
border-top-width:20px;
border-top-color:red;
border-right-width:20px;
border-right-color:green;
border-bottom-width:20px;
border-bottom-color:blue;
border-left-width:20px;
border-left-color:orange;
}
可以看到上边和下边都变成了三角形
再将height设为0:
div
{
width:0px;
height: 0px;
border-style:solid;
border-top-width:20px;
border-top-color:red;
border-right-width:20px;
border-right-color:green;
border-bottom-width:20px;
border-bottom-color:blue;
border-left-width:20px;
border-left-color:orange;
}
可以看到,现在四个border都变成了三角形,那么现在上/下边的长度我们可以推算一下,应该是40px,左/右边也应该是40px
如果这个时候我们令右border的宽度为0会发生什么呢?
div
{
width:0px;
height: 0px;
border-style:solid;
border-top-width:20px;
border-top-color:red;
border-right-width:0px;
border-right-color:green;
border-bottom-width:20px;
border-bottom-color:blue;
border-left-width:20px;
border-left-color:orange;
}
可以看到,右border直接消失,然后上/下border都发生了变化,只有左border没有受影响,这就是我们前面所提及的“依赖”,上border依赖于左、右border的宽度,下border也依赖于左、右border的宽度,当右border的宽度发生变化时,上下border的形状都会发生变化,而左border依赖的上、下border的宽度都没有改变,所以它的形状不会改变
如果现在,我们把左border变为0,又会发生什么呢?
div
{
width:0px;
height: 0px;
border-style:solid;
border-top-width:20px;
border-top-color:red;
border-right-width:0px;
border-right-color:green;
border-bottom-width:20px;
border-bottom-color:blue;
border-left-width:0px;
border-left-color:orange;
}
可以看到,border全部消失了,就算上border和下border有设置值,但因为缺少了左右border,div的width也为0,就导致了构成其三角形的底为0,只剩高20px,所以这样是构不成一个实体的三角形的。所以形成了上图的0x40(40=20(上border)+20(下border))
总结
当我们使利用css的border来进行三角形的绘制的时候,我们可以先将三角形的底进行分解,然后进而确定其他三边border的值