今天学到一个新的知识点——用div来画“三角”。
之前本帅博主写过一篇《前端——菜鸟网站横向CSS导航条菜单：带小三角形》，里面也有介绍如何制作小三角形，不过它是用的现成的小三角图片，虽然也可以用，但是毕竟做网站的人，什么情况都可能会遇到，因此，还是自己画一个“三角”比较好。
下面就介绍一下如何用div画菜鸟网站首页导航条的小三角形。
菜鸟网站首页导航条如下：
那这到底但是怎么做的呢？
话不多说，先给各位客官上代码。
来啊！阿福，关门，放代码！~Biu~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
border: 10px solid;
border-color: #333 transparent transparent transparent;
width:0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>看吧，很简短的一段代码吧，我们来看一下效果~
哟，这么简单就出现一个小三角形了。
那么有的人会问，“你这个三角形是向下的，我要一个向上的或者向别的方向的，那可咋整呀？”
嘿，别说，我还真知道咋整。下面我们就来深入了解一下如何画三角形~
首先我们查看一下这个小三角形的盒模型
从上图我们可以发现，这个div是20*20的，但是只显示了一个三角形，也就是说，刚才的代码使得这个div的上部分显示出来的。
那如何让其他部分也显示出来呢？
哈哈，简单~~只要给其他三边加上颜色就可以了~
刚才大家可能看到这句 “border-color: #333 transparent transparent transparent; ”会有疑惑，这是啥意思类？
其实就是给border加上颜色啦。
这句语句的语法其实是：border-color：上 右 下 左 （即顺时针）。我们想要朝哪一边的三角形，我们只需要给哪一边附上颜色就好啦。
我们来试试四边都加上颜色。
把border-color的属性设置为：
border-color: #333 forestgreen blue cyan;再运行一下，看看结果。
看吧，这样就有了四个方向的三角形。
接下来就是获得某一一个三角了，其实这也很简单，只需要用到border-width属性即可。
border-width和border-color的语法一样，它也有四个值，分别代表上 右 下 左 的宽度。
如果我们不想要哪一个部分的三角形，将其设为零就好。
比如上面，第一个三角形，
我想把它下面这个空白的区域取消。只要把bottom设为零就好了。
即border-width: 10px 10px 0 10px ;
效果如图：
当然，如果想要别的效果，也可以，你自己去试试就好啦。
好啦，以上就是如何用div画三角形的方法啦~这种方法比较好封装，大家以后可以多试试。
大家可以试试用文中的几种方法去实现菜鸟网站首页导航条的小三角形~~~
要是大家有什么别的方法，或者发现文章中有描述错误的地方，欢迎大家留言评论，我们一起学习呀~~
Biu~~~
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
