html+css小案例实战，教你通过CSS绘制三角形原创

大家好，我是金星老师，今天我们要给大家讲到的是如何利用边框来绘制这样一个三角形。首先我们来看一下这个三角形的应用场景，我们来看一下小米商城这个地方有一个下载APP，看到没有，这里有个小三角形，我们再来看一下网易云音乐的这个二级菜单，这里也有一个小三角形。当然三角形的应用场景非常的多，那么接下来我们来看一下我们如何利用代码来绘制这样一个小的三角形。首先我们在桌面新建的一个文件夹，叫做case案例的意思，然后我们来利用Vs code打开啊好，我们来看一下啊，那么接下来我们在这里新建一个网页文件，我们给它取个名字啊，如何利用边框来绘制三角形，点HTML，好，那么接下来我们来按住shift键和感叹号，按住。

回车键啊，我们把网页的基本框架调出来啊，当然我们同样的把这个名字给它取好，如何利用边框绘三角形好，那么接下来我们来看一下我们要绘制这样一个三角形的效果，我们应该先做什么？首先呀，我们需要绘制这么一个大小的正方形，好，所以首先我们来在这里绘制一个正方形的小盒子，电box按住回车啊，当然它是有快捷键的啊，你就直接可以调出来了。好，那么接下来我们来给这个盒子添加样式是这tag等于TSTT，那么接下来我们首先给这个盒子给它添加宽度，我们给它50。

素，给它添加高度50像素，然后我们给它加上一个背景颜色红色，我们来保存一下，看一下效果，好，我们来查看一下啊，大家看一下这个时候是不是在页面当中看到了这样一个红色的小方块啊，OK，好，那么接下来我们这个三角形是怎么做出来的啊，我们首先给这个正方形啊，添加四个方向不同的边框，我们来给它添加一个边框，嗯，首先我们来给它添加一个top，我们给它50像素上边框啊，我们给它加上一个蓝色，好，然后我们把这个代码复制一下，我们改一个上右下左右下波左，好，我们来保存一下，哎，这个手。

大家看到了没有，这个红色的盒子外面有一个50像素的外边框，然后我们给这个外边框啊，不同方向的外边框我们添加不同的颜色，我们来看一下它会发生什么样的神奇效果，好保存，我们来看一下，哎，这个时候是不是有三角形的感觉了啊，当然因为这个正方形的问题是不是，所以我们来看一下我们要怎么做呢？我们可以把这个宽度啊跟这个高度把它设置为零，然后保存一下，哎，大家看一下这个时候是不是看到了三角形呢？那么接下来我们需要哪个方向的三角形，我们只需要把另外三个方向的三角形的颜色，把它设置为透明的是不是就OK了？好，我们来看一下，比如说我们需要这个上三角形，那么接下来我们就把其他方向的这个三角形的这个颜色设置为透明的啊，这个单子是透明的意思，把背景设置为透明的。

好，我们来看一下啊，好保存保存好了之后，我们来看一下是不是看到了上面这个倒三角形啊，啊，当然我们可以把这个背景颜色给它注释掉啊，这样一个三角形就绘制出来了是吧？OK，好，那么接下来如果我们需要左边的这个三角形，那么原理是一样的，我们只需要把左边这个三角形，把它加上一个颜色，比如说黄色，那么它就出来，然后我们把上面这个不需要的这个三角形，我们也把它改成透明的就可以了啊，当然你可以自己去试啊，也就是说你需要哪一个方向的三角形，你就把它的颜色设置出来，其他方向的三角形的对吗？这个边框的这个颜色呀，我们就把它设置为透明的啊，当然这种写法相对来说比较复杂，我们有没有什么简单的写法，有啊，我们来看一下，我们可以把这手些代码全部注释掉，然后我们怎么写啊，我们。

这上面加上一个我的50像素，So里的是，也就是相当于我们给他加了一个50像素的边框，然后这些边框的颜色全部都是透明的，但是我们在下面又单独控制了某一个方向的，怎么样？诶，这个边框的这个颜色，那么这样子就达到了我们想要的效果，再嘛，也比较简单，也就说我们想要头部我们就痛，诶大家看一下，如果我们想要右边，我们就加上一个right控制右边框就可以了，诶大家可一下好了，那么今天这一节课我们就讲到这里了，OK。Knee。