只用一个 HTML 元素可以写出多少形状？——三角形与梯形篇

各位宝子们，由于我们公司在农忙季节临时调整成了单休，而且我作为一个项目的负责人，也有点任务要忙。所以最近更新的频率有所下降。在这里向各位宝子们说声抱歉！

上一期，我们主要针对平行四边形系列的形状做了讲解。之所以把四边形拆分成平行四边形系列和梯形系列，是因为写梯形的时候，需要灵活的使用边框属性。同时，这个灵活使用边框属性的方法，也是写三角形的方法。所以，我们今天围绕边框属性，同时给大家带来三角形系列与梯形系列的形状。

---

一、边框属性

我们先不厌其烦的把边框属性的知识点给详细讲解一下。

早期边框的基数属性有以下三个：

1. border-style：用于定义边框的外观；

2. border-width：用于设置边框的粗细；

3. border-color：用于定义边框的颜色。

比如，我想控制矩形的边框为虚线，宽度为 10px，颜色为浅蓝色：

border-style: dashed;
border-width: 10px;
border-color: lightblue;

就会得到如下结果：

同时，边框属性也可以单独制定某一个方向的：

1. border-top：指定上边框；

2. border-right：指定右边框；

3. border-bottom：指定下边框；

4. border-left：指定左边框。

比如，我只想给上边框一个点线边框，宽度为 10px，颜色为浅绿色：

border-top: dotted 10px lightgreen;

您没看错，基础属性是可以这样缩写的。得到这样的结果：

将边框的三个基础属性和四个方位属性排列组合就得到了十二个边框属性：

1. border-top-style：用于指定上边框的样式；

2. border-top-width：用于指定上边框的宽度；

3. border-top-color：用于指定上边框的颜色；

4. border-right-style：用于指定右边框的样式；

5. border-right-width：用于指定右边框的宽度；

6. border-right-color：用于指定右边框的颜色；

7. border-bottom-style：用于指定下边框的样式；

8. border-bottom-width：用于指定下边框的宽度；

9. border-bottom-color：用于指定下边框的颜色；

10. border-left-style：用于指定左边框的样式；

11. border-left-width：用于指定左边框的宽度；

12. border-left-color：用于指定左边框的颜色。

如此一来，我们就可以非常灵活的对每一个边框的每一个属性进行单独控制了。

如果我们只写一个 border 属性，是这十二个边框属性的缩写，可以同时控制四个方位边框的三个基础属性：

border: solid 10px lightblue;

可以看到，边框控制是非常灵活的。如今的 css 中，还增加了 border-image 使用图片或渐变色填充边框的属性，以及 border-radius 实现圆角边框的属性。这里就不再过多展开。

---

二、梯形系列

咱们来做这样一个测试，控制这个 div 的宽度和高度均为 200px，设置四个边框的宽度都为 200px的实线，并且四个方向设置不同的颜色。

width: 200px;
height: 200px;
background: red;
border-top: 200px solid green;
border-right: 200px solid greenyellow;
border-bottom: 200px solid yellow;
border-left: 200px solid lightblue;

于是，我们就得到了这样的效果：

我们设置 div 的宽度和高度均为 200px，但是占领的范围却为 600px * 600px，因为边框的宽度也为 200px。那么我们将这个元素的计算机坐标系给标注出来。

说明：计算机坐标系不同于我们在数学上学的笛卡尔坐标系，计算机坐标系是以元素的左上角为坐标原点，水平向右为 x 轴正方向，竖直向下为 y 轴正方向。

 

图中可以看到，相邻两个边框的分界线，都是倾斜的。比如右上角的分界线，就是从点 (200, 0) 到点 (400, -200) 的。

聪明的你一定发现了，四条边框展示出来的形状不就是四个等腰梯形吗？于是，我们设置该 div 的高度为 0 看看效果。

width: 200px;
height: 0;
border-top: 200px solid green;
border-right: 200px solid greenyellow;
border-bottom: 200px solid yellow;
border-left: 200px solid lightblue;

由于没有高度，所以我们也不再设置背景属性。

可以看到，上边框和下边框显示为梯形，左右两个边框显示为三角形。于是，我们设置上边框的颜色为红色，其余边框颜色为透明色：

width: 200px;
height: 0;
border-top: 200px solid red;
border-right: 200px solid transparent;
border-bottom: 200px solid transparent;
border-left: 200px solid transparent;

直接看效果：

 

得到一个上底长下底短的等腰梯形。

两点说明：

1. 这个例子中，下边框是可以不用设置的，之所以写出来，是为了从代码的统一性来帮助大家理解各个方向的边框设置。后面的三角形案例中亦如此，大家可以自己判断。

2. 这里设置左边框和右边框的宽度为不同的宽度，将会得到任意梯形。

如法炮制一下，设置上边框为透明，下边框为红色：

width: 200px;
height: 0;
border-top: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 200px solid red;
border-left: 200px solid transparent;

也可以得到一个上底短下底长的等腰梯形：

同样的道理，当我们设置 div 元素的宽度为零，高度为 200px 的时候，也可以通过控制边框得到两个指向左边或者右边的等腰梯形，这里就不再做过多赘述，直接附上代码和效果给大家自行研究吧！

width: 0;
height: 200px;
border-top: 200px solid transparent;
border-right: 200px solid red;
border-bottom: 200px solid transparent;
border-left: 200px solid transparent;

width: 0;
height: 200px;
border-top: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 200px solid transparent;
border-left: 200px solid red;

现在我们以上底短下底长的等腰梯形为例，可以看到，其实显示的是 div 元素的下边框，左右边框通过宽度贡献，并设置为透明色，让下边框也向左右两边延申，从而形成了梯形的显示效果。于是，不设置上边框，显示不变：

width: 200px;
height: 0;
border-right: 200px solid transparent;
border-bottom: 200px solid red;
border-left: 200px solid transparent;

现在，我们也不设置左边框，只保留右边框：

width: 200px;
height: 0;
border-right: 200px solid transparent;
border-bottom: 200px solid red;

这样，也就相当于左边框的宽度为零了。

 

于是，我们便得到了直角梯形。

直角梯形仅仅通过边框控制，就可以有八个正方向。这里就不一一举例了，相信绝对难不倒聪明的你！

---

三、三角形系列

三角形：由三条边组成的图形叫做三角形。

三角形按照角分类可以分为锐角三角形、钝角三角形和直角三角形；也可以按照边分类分为任意三角形、等腰三角形和等边三角形。

• 锐角三角形：三个角都是锐角的三角形；

• 钝角三角形：有一个角是钝角的三角形；

• 直角三角形：有一个角是直角的三角形；

• 等腰三角形：有两条边相等的三角形；

• 等边三角形：三条边都相等的三角形；

• 等腰直角三角形：两条直角边相等的等腰三角形。

几何知识，咱们就不做过多的展开了，还是尽快进入主题吧！

咱们前面通过给四条边不同颜色，得到了这样的效果：

 

现在，我们设置这个 div 的宽度和高度均为零：

width: 0;
height: 0;
border-top: 200px solid green;
border-right: 200px solid greenyellow;
border-bottom: 200px solid yellow;
border-left: 200px solid lightblue;

就会得到一个只有四条边框构成的图形。

 

聪明的你一定会看到重点了。没错，这四个边框显示的形状就是四个不同方向的三角形。

于是，我们尝试只给一个方向的边框一个红色，其它方向的边框均显示为透明色：

width: 0;
height: 0;
border-top: 200px solid red;
border-right: 200px solid transparent;
border-bottom: 200px solid transparent;
border-left: 200px solid transparent;

就得到了一个方向向下的三角形：

 

同样的方法如法炮制，我们可以得到各个方向的三角形：

width: 0;
height: 0;
border-top: 200px solid transparent;
border-right: 200px solid red;
border-bottom: 200px solid transparent;
border-left: 200px solid transparent;

 

width: 0;
height: 0;
border-top: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 200px solid red;
border-left: 200px solid transparent;

width: 0;
height: 0;
border-top: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 200px solid transparent;
border-left: 200px solid red;

我们再做一个尝试，让相邻的两个边框颜色设置为红色，剩余两个边框的颜色依然为透明色： 

width: 0;
height: 0;
border-top: 200px solid red;
border-right: 200px solid red;
border-bottom: 200px solid transparent;
border-left: 200px solid transparent;

于是得到了另外倾斜方向的三角形：

 

同样，我们继续如法炮制，也可以得到另外三个方向的三角形：

width: 0;
height: 0;
border-top: 200px solid transparent;
border-right: 200px solid red;
border-bottom: 200px solid red;
border-left: 200px solid transparent;

width: 0;
height: 0;
border-top: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 200px solid red;
border-left: 200px solid red;

width: 0;
height: 0;
border-top: 200px solid red;
border-right: 200px solid transparent;
border-bottom: 200px solid transparent;
border-left: 200px solid red;

当然，除了以上的等腰三角形和等腰直角三角形外，如果我们设置边框的宽度为不同的宽度，还可以得到任意三角形：

width: 0;
height: 0;
border-top: 200px solid red;
border-right: 100px solid transparent;
border-left: 300px solid transparent;

任意三角形的形态很多，如图上的锐角三角形，倘若我们把左右边框的宽度设置的比较宽，也可以得到钝角三角形，这里我就不再一一举例了，全看大家的灵活控制。

小技巧：通过 transform 属性的 rotate 方法控制旋转，可以让三角形指向任何一个方向，让其更加灵活噢！

↓

↓

↓

到此，我们已经讲解了仅仅使用一个 div 元素写出形状的三角形系列和四边形系列。这两个系列都有一个特点，那就是构成图形的边都是直线。那么，下次我们来讲讲由曲线构成的图形吧。

敬请期待下一篇章——弧形篇

 

关注“临界程序员”微信公众号，为您送上更多精彩内容！