css做三角形原理

发表于 | 分类于 |

以前知道css能做出各种方向的三角形，但其实一直都不知道中间的原理是什么。今天把它解决了。几个图就能解决清楚。

制作普通的正方形

为了能够看清楚各个边的变化，我把各个边的颜色设置成了不同的颜色。每个边的表现都是梯形。如图一所示。设置盒子大小为100px,并且盒子边框为10px;

1
2
3
4
5
6
7
#first-box{
	width:100px;
	height: 100px;
	border-width: 10px;
	border-style: solid;
	border-color: red blue yellow green;
}

制作没有高度的正方形

上面例子中的空白部分，是由于设置了宽和高的大小。当我们设置width为0，height为0时，空白处消失，此时只剩下边框组成的正方形，如上图2。

1
2
3
4
5
6
7
#second-box{
	width: 0px;
	height: 0px;
	border-width: 10px;
	border-style: solid;
	border-color: red blue yellow green;
}

制作三角形

上面我们已经可以看到四个不同的小三角形了。我们需要三角形往哪个方向就设置该方向有颜色和边框。其他方向均透明即可。如图3

1
2
3
4
5
6
7
#third-box{
	width:0px;
	height: 0px;
	border-width: 10px;
	border-style: solid;
	border-color: red transparent transparent transparent;
}

比如上面我们制作了一个向下的三角形，表示上面有边框，左右和下都没有，设置为transparent。即可得到了。

制作直角三角形

上面我们知道其实三角形就是边框的高度组成。如果设置border-width为10，图3那个底边就是两者之和，也就是20px。那我们如果设置右边的边框为0px，只有左边的边框，也就得到了一个直角三角形，如图4.

1
2
3
4
5
6
7
8
#last-box{
	width: 0px;
	height: 0px;
	border-width:10px;
	border-style: solid;
	border-color: red transparent transparent transparent;
	border-right-width: 0px;
}