用原生css实现三角形,CSS实现三角形

我们在使用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图形，都是基于这个原理实现的。