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

222 阅读10分钟

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

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


一、边框属性

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

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

  • border-style:用于定义边框的外观
  • border-width:用于设置边框的粗细
  • border-color:用于定义边框的颜色

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

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

就会得到如下结果:

边框基础属性.png

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

  • border-top:指定上边框
  • border-right:指定右边框
  • border-bottom:指定下边框
  • border-left:指定左边框

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

border-top: dotted 10px lightgreen;

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

单独上边框属性.png

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

  • border-top-style:用于指定上边框样式
  • border-top-width:用于指定上边框宽度
  • border-top-color:用于指定上边框颜色
  • border-right-style:用于指定右边框样式
  • border-right-width:用于指定右边框宽度
  • border-right-color:用于指定右边框颜色
  • border-bottom-style:用于指定下边框样式
  • border-bottom-width:用于指定下边框宽度
  • border-bottom-color:用于指定下边框颜色
  • border-left-style:用于指定左边框样式
  • border-left-width:用于指定左边框宽度
  • border-left-color:用于指定左边框颜色

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

多样边框.png

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

border: solid 10px lightblue;

一个border属性.png

可以看到,边框控制是非常灵活的。如今的 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;

于是,我们就得到了这样的效果:

四个不同颜色的实线边框.png

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

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

四个不同颜色的实线边框.jpg

图中可以看到,相邻两个边框分界线,都是倾斜的。比如右上角分界线,就是从点 (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;

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

只有宽度没有高度的四个不同颜色的实线边框.png

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

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

直接看效果:

等腰梯形下.png

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

两点说明:

  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;

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

等腰梯形上.png

同样的道理,当我们设置 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;

等腰梯形左.png

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

等腰梯形右.png

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

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

等腰梯形上.png

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

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

这样,也就相当于左边框宽度了。

直角梯形.png

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

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


三、三角形系列

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

三角形按照角分类可以分为锐角三角形钝角三角形直角三角形;也可以按照边分类分为任意三角形等腰三角形等边三角形

三角形.jpg

  • 锐角三角形:三个角都是锐角的三角形;
  • 钝角三角形:有一个角是钝角的三角形;
  • 直角三角形:有一个角是直角的三角形;
  • 等腰三角形:有两条边相等的三角形;
  • 等边三角形:三条边都相等的三角形;
  • 等腰直角三角形:两条直角边相等的等腰三角形。

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

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

四个不同颜色的实线边框.png

现在,我们设置这个 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;

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

只有四个不同颜色的实线边框.png

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

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

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

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

三角形下.png

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

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

三角形左.png

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

三角形上.png

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

三角形右.png

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

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

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

三角形右上.png

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

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

三角形右下.png

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

三角形左下.png

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

三角形左上.png

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

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

任意三角形.png

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

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

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

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