前端技巧集：无处不在的小三角

在我们的网页中到处都有小三角的存在，不知童鞋们发现了没有，例如看看下图有几个三角？（自己先找一下再看文章末尾的答案）

我们来学一下如何使用CSS制作三角。

前提

我们为三角定义一个CSS类triangle的span元素（triangle是三角形的意思）。

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标签做为小图标的标签，例如：

参考答案

至少四个。如下图：

---

如有帮助请点赞，如有疑问请留言。