在我们的网页中到处都有小三角的存在，不知童鞋们发现了没有，例如看看下图有几个三角？（自己先找一下再看文章末尾的答案）
我们来学一下如何使用CSS制作三角。
前提
我们为三角定义一个CSS类triangle的span元素（triangle是三角形的意思）。
<span class="triangle"></span>
1. 制作四色边框
设置四个不同颜色的边框。
.triangle {
display: inline-block;
border-width: 100px;
border-style: solid;
border-color: #000 #f00 #0f0 #00f;
}
大家看到了四个三角吧。其中，border-color 四个值依次表示上、右、下、左四个边框的颜色。
为什么要设置display: inline-block;，大家知道原因吗？
2. 设置透明三角
保留上面的三角，其他的都设成透明。
border-color: #000 transparent transparent transparent;
其他的三角也是同样的道理。
下三角
border-color: transparent transparent #0f0 transparent;
左三角
border-color: transparent transparent transparent #00f;
右三角
border-color: transparent #f00 transparent transparent;
3. 调整小三角的大小
一般作为下拉菜单的小三角，宽度一般为3px~5px。
以上三角为例
.triangle {
display: inline-block;
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
OK，CSS制作小三角完成。学会了吗？还有下面一种简写方式，大家看看是否能看懂呢？其实，写法有很多种，只要能够理解并会用的一种即可。
.triangle {
display: inline-block;
border: 5px solid transparent;
border-top-color: #000;
}
最佳实践
通常像小三角这样的小图标，大家经常使用i标签表示。这里的i标签虽然在HTML种表示斜体（italic），但是，小图标（icon）英文单词首字母也是i，只要在不在标签里面写内容，就不会有影响。所以也常用i标签做为小图标的标签，例如：<i class="triangle"></i>
参考答案
至少四个。如下图：
如有帮助请点赞，如有疑问请留言。
