00:00
大家好,我是上硅谷H5学科严老师,在程序员节日到来之际和大家分享一道面试题,用纯CSS创建一个三角形,那好,那接下来呢,我们说最终我们之前在画正常的盒子是不是都是一个矩形啊,而现在这道题要求我们最终使用CSS的样式想创建出一个三角形,那接下来呢,我们是通过一个效果来给大家演示一下,怎么样通过我的CSS来创建一个三角形,当前元素div vid值呢,我们管它起名字叫做box,来操作一下它的ID值,设置一下元素的基本样式,元素的区的宽呢,我们说限制设置成我的100PX来,元素的高呢,我们也给它设置成100PX来,背景颜色现在我们不去给它指定了,我们给它指定个边框。来包ER包ER,最终我们给它设置成1PX实线颜色区域呢,我们需要给它单独去设置,为了方便观察这个效果,我们给它单独制定边框的效果,那边框我们说明显是不是有四条啊,对吧?来那第一条呢,我们说先操作一下我们的上边框来ER top color这个区域呢,我们给它来一个红色,接下来我们再来一个,来一个bother right来right color这个区域呢,我们给它来一个蓝色,来那紧接着我们说下边框是不是我们最终的bother bottom啊来这个域呢,我们说给它来一个粉色吧,来个定pick,紧接着我们再操作,再操作一下我们最终的左边是不是我们最终的bother left这个区域呢?我们说给他操作一个来,来一个一棍,来完之后,我们打开浏览器,先看一下元素的基本样式。
01:56
来元素的基本号是不是在这里啊,那好,那接下来我们说右键检查,借助一下我的浏览器,选中一下我当前的盒子,来完之后,接下来我们通过浏览器的动态调节形式操作一下元素的基本样式,操作哪个语句呢?操作我的这一句语句,来大家仔细的看一下,是不是我的包子EPX实线的部分啊,来接下来我们说选中一下它,让我们整个元素的边框变得稍稍变得大一点,来这是我们整体来看一下,我给你边变大,你边看一下元素的基本钥匙,你看随着边框的逐渐变大,我的整个盒子是不是也在变大,并且出现之后,我的边框与边框临界的地方是不是出现了一条斜线呀,对吧?那有人说,老师,这和我们最终画的三角形有什么关系吗?来,这时候我给你画一个三角形。
02:54
我们看到正常的三角形是不是都是这个样子,那最终我们说三角形,三角形两条边之间是不是要斜线呀,而这时候你看我红色与绿色这条边边界的这个区,来我给大家换一个颜色啊,来给大家换一个颜色,我红色与绿色这条边边际的距离,我如果让这条线继续往前给我增加,同样我让这条蓝蓝色的线与我红色的线继续给我往前增加,增加,直到它们俩相交的这个时候,你看我上边部分是不是就出现了一个三角形啊,对吧?那实指上这个区就是我们最终整个三角形实现的一个原理,那就证明我首先要设置我的边框区是不是应该是足够大的呀,对吧?来,那好呢,接下来我们说一起来做一下,需要我们最终边框区域足够大来,为了看到效果明显一点,我们先给他写一个100PX写完。
03:55
600PX之后,我们刷新一下是不是这样一个效果,但是这样完成之后,我们说无论怎么大,感觉中间这个区域好像一直都没有相交的那个点,对吧?这时候我们怎么做呢?我们只需要把我的宽和我的高变成足够小,让它们小到零就可以了,这时候我们直接来刷新,看一下最终的效果来刷新。
04:19
你看现在这边是不是出现了四个三角形啊,那接下来我们说最终我们只想需要上面的红色,我其他区域我不想需要了,那应该怎么办呢?来我们只需要操作这样的一个语句,我说上方这个语句不应该为红色吗?那其他这条边的部分的颜色,我们直接给它换成透明色,切记啊,不要写成白色,不要写成白色,因为你一旦写成白色,我整个背景要有颜色的话,你整个白色区域是不会显示出来呀,对吧?所以呢,接下来我们说其他不需要的地方,我们需要给它换成我们最终的透明色transparent,这时候我们直接来看一下最终的效果来刷新。
05:06
是不是在这里呀?来那人说老师我偏偏想要换成白色,不可以吗?来这首我给大家换一下,来换成一个白色,换完白色之后你开始刷新,感觉和我们最初始的效果好像没有什么区别,对吧?来这时候我给大家演示一下,我们给包得添加一个背景颜色,来,我随便添一个,我们说添一个黄色,来添完黄色之后,你仔细的看一下,最终这个区域来走,你看出现了什么呀,我们这条白的三角形是不是明显出来了呀,而我原来写的transparent区明显是不是看不到啊,所以最终在书写的时候,这个区不要写成白色,因为你一旦整个背景给我们添加颜色,我整个三角形出现的效果是不是很难看呀,对吧?来,那好,那接下来我们说这是我们最终实现的简单的一个三角形,那人又说了,老师,除了这样的三角形之外,我还想实现这样的一个三角形来,我大。
06:06
题呢,给大家画一下,比如说我想实现一个这样的三角形,来实现一个大体是一个这样的三角形,那这样的三角形是不是只需要把我的上边和我的左边添加颜色,另外两个角的趋势变成透明色呀,来,这时候我们把它变成红色进去找到这边我们刷新一下,你看根据这个需求,我们是不是就实现了一个三角形啊,对吧?所以呢,接下来我们说三角形的实现思路实际上很简单,只需要把我们最终的元素的宽度和高度设为零,需要的部分设置成真实的一个颜色,不需要的部分给我们设置成透明色是不是即可呀?
我来说两句