详谈利用css border制作三角形

最近在做一个小项目时，前端需要一个三角形形状的样式，就上网搜了一下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的值