我们在使用CSS框架的时候,经常会用到下拉框组件,一般该组件里面有个下三角。此外,我们经常用的tooltip,一般也有个三角形,指明方向。初次接触还以为是个图片,审查元素才发现几行CSS代码就可以实现。我查看了下Bootstrap的源代码,

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图形,都是基于这个原理实现的。



回不去昨天