在前端工作中经常会出现好多三角形，比如下拉图标、tooltip 提示框、多级菜单等，如果将三角形变成图片，通过 img 标签的 src 或者 background 中的 url 来访问，会增加 http 请求的个数，从前端性能方面来看这并不好，所以对于普通的三角形，我们要用 css 来画三角形.
    由于 ie6 我们在工作中已经很少要求兼容了，所以在此把兼容 ie6 和其他浏览器的 demo 分开不同标题写，便于同学快速查询，节省时间。

普通实心三角形

    css 实现三角形图标已不是什么新鲜技术，也有很多相关的技术文章讲过了，基本原理大同小异。
    主要是利用一个 div 或者元素的 border 并不是我们直观意义上的一条有高度的线，而是一个等高梯形或者三角形（宽高为 0 时），要是给 div 的高和宽设置为 0，然后设置四个 border 不同的颜色，三角形就出来了，可以看一下效果：
html：

<div class="container"></div>
1

css:

.container {
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-color: blue red green yellow;
}
1
2
3
4
5
6
7

效果：
图片描述

可以看到每一个方向的 border 都是一个三角形，那么我们只需把对应方向剩余其他方向的 border 设置为透明或者隐藏掉就可以得到任何方向的一个三角形了。如果我们想得到一个下拉图标，我们可以将 border 的左右和下边框改为透明，css 改动如下：

.container {
  width: 0px;
  height: 0px;
  border-width: 50px;
  border-style: solid;
  border-color: blue transparent transparent transparent;
}
1
2
3
4
5
6
7

再看一下效果：
图片描述

即便是已经生成一个我们需要的三角形，但是三角形的占用高度仍是原高度，这会导致在和其他元素使用时，造成上移的效果。此时，我们需要把下边框的高度设置为 0。

最终版本 1，手动改颜色：

.container {
  width: 0px;
  height: 0px;
  border-width: 50px 50px 0;
  border-style: solid;
  border-color: blue transparent transparent transparent;
}
1
2
3
4
5
6
7

再来看看效果（设置一个阴影方便来查看）：
图片描述

在使用时我们仍需要修改对应的颜色，能不能根据父元素设定的颜色（使用当前字体颜色），显示对应的颜色呢？我们需要把 border-color 修改下：

最终版本 2，使用当前字体颜色，默认黑色：

.container {
  width: 0px;
  height: 0px;
  border-width: 50px 50px 0;
  border-style: solid;
  border-left-color: transparent;
  border-right-color: transparent;
}
1
2
3
4
5
6
7
8

兼容 ie6 的手动改颜色的实心三角形

因为 ie6 不支持 transparent 透明属性，这时候我们可以将对应区域的 border 的样式设置为 dashed，dashed 在边框宽度很大时，会隐藏掉。
css 修改如下：

.container {
  width: 0px;
  height: 0px;
  border-width: 50px 50px 0;
  border-style: solid dashed dashed dashed;
  border-color: blue transparent transparent transparent;
  overflow: hidden;
}
1
2
3
4
5
6
7
8

兼容 ie6 的继承颜色实心三角形

css 修改如下：

.container {
  width: 0px;
  height: 0px;
  border-width: 50px 50px 0;
  border-style: solid dashed dashed dashed;
  border-left-color: transparent;
  border-right-color: transparent;
  overflow: hidden;
}
1
2
3
4
5
6
7
8
9

普通空心三角形

空心三角形的实现很简单，就是在实心三角形上覆盖一个比它小的和背景颜色相同的实心三角形就行了。
css 如下：

.container {
  width: 0px;
  height: 0px;
  border-width: 50px 50px 0;
  border-style: solid;
  border-color: blue transparent transparent transparent;
  position: relative;
}
.container:before {
  content: '';
  width: 0px;
  height: 0px;
  border-width: 45px 45px 0;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: -48px;
  left: -45px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果：
图片描述

兼容 ie6 的空心三角形

ie7 不支持 before 伪类，所以用 div 代替 html 如下：

<div id="container">
  <div id="container1"></div>
  <div id="container2"></div>
</div>
1
2
3
4

css 如下：

#container {
  position: relative;
}
#container1 {
  width: 0px;
  height: 0px;
  border-width: 50px 50px 0;
  border-style: solid dashed dashed dashed;
  border-color: blue transparent transparent transparent;
}
#container2 {
  width: 0px;
  height: 0px;
  border-width: 44px 45px 0;
  border-style: solid dashed dashed dashed;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 2px;
  left: 5px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

普通三角指示箭头

    为了语义化，两个三角形用 before 和 after 伪类来实现，因为 after 伪元素会覆盖 before 伪元素，所以 after 伪元素就是第二个三角形。
    在消息框中为了视觉效果更好，我们应该将三角箭头的边框宽度和主体元素的边框宽度保持一致。
    第二个三角形相较于第一个三角形的偏移值 A 其实应该是主体元素边框宽度 B 的"根号 2"倍，约为 1.414，为了方便可以按 1.4 倍计算。
假设主体元素边框宽度为 6px，所以第二个三角形相较于第一个三角形的偏移量 A 应为 6px*1.4 = 8.4px
如下图所示：
图片描述 html:

<div class="container"></div>
1

css:

.container {
  position: relative;
}
.container:before {
  content: '';
  width: 0px;
  height: 0px;
  border-width: 50px 50px 0;
  border-style: solid;
  border-color: blue transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.container:after {
  content: '';
  width: 0px;
  height: 0px;
  border-width: 50px 50px 0;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: -1px;
  left: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

效果：
图片描述

兼容 ie6 的三角指示箭头

ie7 不支持 before 伪类，所以用 div 代替 html 如下：

<div id="container">
  <div id="container1"></div>
  <div id="container2"></div>
</div>
1
2
3
4

css 如下：

#container {
  position: relative;
}
#container1 {
  width: 0px;
  height: 0px;
  border-width: 50px 50px 0;
  border-style: solid dashed dashed dashed;
  border-color: blue transparent transparent transparent;
}
#container2 {
  width: 0px;
  height: 0px;
  border-width: 50px 50px 0;
  border-style: solid dashed dashed dashed;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: -1px;
  left: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

TOC