弄懂css绘制三角形、多边形等图案原理

前言

用css画三角形我们再常见不过，那么如果是要你画以下图案呢？你能否瞬间在脑海里蹦出方案。

盒子模型的border属性非常奇怪，有时它会是三角形、梯形、矩形（如上图）。那么到底哪一种才是它原来的图案呢？

探讨

1.从一条边框开始说起

首先我们只设置border-top，其他三条边框不设置。

（这里灰色的部分是盒子）

代码：

.box {
       width: 50px;
       height: 50px; 
       border-top:50px solid red; 
       background-color: rgba(0, 0, 0, .1);
}

现在它的边框是正方形。按道理来说同时设置四条边框应该是长成这样（下图）

实际告诉我们，并不会这样，因为这样并不是意义上的边框。因此根据实际同时设置四条边框将这样显示：

以下是实现代码：

.box {
    width:50px;
    height:50px;
    border-top:50px solid red;
    border-left:50px solid yellow;
    border-bottom:50px solid orange;
    border-right:50px solid pink;
}

现在，它的四个边框均为梯形。

如果把width、height都设置为0，那么，它会长成下面这样：

代码：

.box {
    width:0;
    height:0;
    border-top:50px solid red;
    border-left:50px solid yellow;
    border-bottom:50px solid orange; 
    border-right:50px solid pink;}

现在它的边框都是三角形。

总结：

通过几番捣鼓，我总结出了以下三个要点：

1. border-top 、border-bottom 的上底由盒子的width控制
2. border-left 、border-right的上底由盒子的height控制
3. 如果两个相交的边框都有设置，那么相交处就会自动补全。

我以这个标准的盒子为例，上、下边框由于宽度设置为50px，因此边框长度都为50px；左、右边框由于高度设置为50px，因此边框长度为50px;因为同时设置了四条边框，所以边框相交处自动补全。因此每条边框由正方形变为梯形。

根据这三点。我们就可以轻易制作成三角形、梯形等小图案。

以三角行为例：

这里三角形上底边长度为0，所以盒子和width设置为0。三角形由左右边框与顶部边框相交补全而形成。因此需要将左右边框颜色设置为透明，代码如下：

.box {
    width: 0;
    height: 0;    border-top:50px solid red;    border-left: 50px solid transparent;    border-right: 50px solid transparent;}