CSS制作小三角

原理

---

CSS盒模型

1. 盒模型 = Margin + Border + Padding + Content
2. 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等
3. 调整宽度大小可以调节三角形形状

示例1

---

通常情况下，我们设置盒子的宽高度及上下左右边框，会呈现四周红绿蓝灰，而且相邻交界处有平滑的斜线，如下图所示:

代码如下:

.test{
    width: 20px;
    height: 20px;
    border-width: 20px;
    border-color: #f00 #0f0 #00f #ccc;
    border-style: solid;
}

示例2

---

在上面基础上，把宽高都设为0，效果如下:

代码如下:

.test{
    width: 0;
    height: 0;
    font-size:0;
    line-height:0;
    overflow:hidden;
    border-width: 20px;
    border-color: #f00 #0f0 #00f #ccc;
    border-style: solid;
}

之所以设置overflow，font-size，line-height是因为，在IE6会有默认的字体大小和行高，导致盒子呈现为被撑开的长矩形
此时我们可以看到4个带颜色的三角形了，如果我们把4个颜色只保留一个颜色，其他三个颜色设为transparent，那一个小三角不就出来了嘛

示例3

---

把上右下边框颜色设为transparent之后效果如下:

代码如下:

.test{
    width: 0;
    height: 0;
    font-size:0;
    line-height:0;
    overflow:hidden;
    border-width: 20px;
    border-color: transparent transparent transparent #ccc;
    border-style: solid;
}

但是，IE6不支持透明，so～～:

示例4

---

上个例子提到的IE兼容性怎么处理了？其实很简单，设置其他三条边边框样式border-style:dashed | dotted即可达到透明的效果，具体原因如下:

IE6不支持transparent属性,而间接设置对应的透明边框的border-style属性为dotted或dashed即可解决这一问题,原因是在IE6下, 点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上（height>=border-width*3）,虚线宽长度必须是其宽度的5倍以上（height>=border-width*5）,否则点线和虚线都不会出现

代码如下:

.test {
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    border-width: 20px;
    border-color: transparent transparent transparent #ccc;
    border-style: dashed dashed dashed solid;
}

示例5

---

之前我们例子中小三角的斜边都是依赖于原来盒子的边，其实还有一种方法，让斜边在盒子的对角线上，如下:

代码如下:

.test {
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    border-width: 0 40px 40px 0;
    border-color: transparent red #ccc transparent;
    border-style: dashed solid solid dashed;
}

示例6

---

结合示例5的例子，我们可以通过构建多个这样类似的小三角做一个气泡聊天的效果:

代码如下:

.test {
    width: 400px;
    padding: 30px;
    margin-left: 60px;
    background-color: #369;
    color: #fff;
    font-family: "DejaVu Sans Mono";
    position: relative;
}

.test:before,
.test:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.test:before {
    border-width: 20px;
    border-style: solid;
    border-color: #fff #369 #369 #fff;
    left: -40px;
    top: 40px;
}

.test:after {
    border-width: 10px 20px;
    border-style: dashed solid solid dashed;
    border-color: transparent #fff #fff transparent;
    left: -40px;
    top: 60px;
}