我们在使用CSS框架的时候，经常会用到下拉框组件，一般该组件里面有个下三角。此外，我们经常用的tooltip，一般也有个三角形，指明方向。初次接触还以为是个图片，审查元素才发现几行CSS代码就可以实现。
我查看了下Bootstrap的源代码，是由一个叫 caret 的类实现的，如下所示：
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: @caret-width-base dashed;
border-top: @caret-width-base solid ~"\9"; // IE8
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
}
这是一段LESS代码，不过你也能看出点端倪。仔细研究之后，发现原理其实很简单：首先把宽度和高度设置为0，然后设置边框样式，结束。有点懵逼，没关系，我也是。所以我们还是一步一步来分析下。首先看如下代码：
.caret {
width: 0;
height: 0;
border: 50px solid black;
}
这个很容易猜到，你会得到一个黑色的正方形。
不如把四个边框都换个颜色，看看效果如何：
.caret {
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid blue;
}
机智的你好像明白了什么......
我们不妨给 caret 设置非零的宽度和高度：
.caret {
width: 50px;
height: 50px;
border-top: 50px solid black;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid blue;
}
就会得到这个图案。
道理很简单，只是我们平时容易忽略而已。我们小时候学习几何的时候，画的图是很细的直线，包括老师也一直强调，做几何题的时候，计算长宽不用考虑直线的长度（准确的说是厚度）。所以我们脑海中也一直保留着这个错误的观点，但是到了编程领域，完全不同了，你画出来的图是一个像素一个像素拼出来的，即使最细的border: 1px solid black;也是占了一个像素。所以，让我们过分一点，把边框宽度设置成50px，你就可以看到计算机是如何处理这种情况的，而且这种处理也是合乎情理的，边框交接处，一边占用一半的面积。
所以，回归到最初的主题，如何画三角形。我们改一下第三段代码，左右下边框的颜色设置为transparent：
.caret {
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
}
/* 如下代码会更优雅点，得到的效果是一样的 */
.caret {
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: black;
}
所以，你就得到了你想要的三角形了。
结束了吗？还没有，你这样得到的下三角虽然可用，但是本质上占用的空间还是一个正方形，到时候你布局的时候就会发现有点坑，所以我们应该将这个三角形占用的空间尽可能缩小。考虑下第三段代码中，将下边框的长度设置为0，会怎么样？
/* 不设置border-bottom即可 */
.caret {
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid red;
border-left: 50px solid blue;
}
怎么样，有意思吧。如果你此时把左边框和右边框的颜色设置成 transparent，岂不是用最小空间实现了下三角。
知道这个原理后，你是不是就可以得到上三角、左三角、右三角等各种三角形。下图中的示例代码，你可以点击此处获取。
如果你善于思考的话，你会发现稍微改一下第四段代码，你就会得到一个梯形。某种程度上来讲，这可以算CSS的一个奇技淫巧，但是明白实现原理远比实现一个三角形重要得多，有很多有趣的CSS图形，都是基于这个原理实现的。
参考文章：《终于搞懂了CSS实现三角形图标的原理》
