![](http://images2015.cnblogs.com/blog/915085/201603/915085-20160317154824256-155881692.png)
![](http://m.sbmmt.com/m/article/file:///C:/Users/Administrator/AppData/Local/YNote/data/qq93D3C6F26FECE62E0229E96C9E5379AC/cf2bf719204e46f3a3702bb3c866d829/qq%E5%9B%BE%E7%89%8720160317132723.png)
![](http://m.sbmmt.com/m/article/file:///C:/Users/Administrator/AppData/Local/YNote/data/qq93D3C6F26FECE62E0229E96C9E5379AC/cf2bf719204e46f3a3702bb3c866d829/qq%E5%9B%BE%E7%89%8720160317132723.png)
![](http://images2015.cnblogs.com/blog/915085/201603/915085-20160317154844271-1836985921.png)
![](http://m.sbmmt.com/m/article/file:///C:/Users/Administrator/AppData/Local/YNote/data/qq93D3C6F26FECE62E0229E96C9E5379AC/e37287cf57934f3c937f50907fdef9e9/%7Dk941w%5Bqcibb.png)
div{
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid;
border-color: lightgreen pink yellow lightblue;
}
![](http://m.sbmmt.com/m/article/file:///C:/Users/Administrator/AppData/Local/YNote/data/qq93D3C6F26FECE62E0229E96C9E5379AC/a5980ea7963a40ffa0dc09dc38e670ad/%5Bj_e(8w05puw.png)
![](http://images2015.cnblogs.com/blog/915085/201603/915085-20160317154902412-928139821.png)
#triangle{
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid;
border-color: transparent transparent yellow transparent;
}
1 #triangle{
2 width: 0px;
3 height: 0px;
4 *width: 40px;
5 *height: 40px;
6 font-size: 0;
7 line-height: 0;
8 overflow: hidden;
9 border-width: 20px;
10 border-style: dashed dashed solid dashed;
11 border-color: transparent transparent yellow transparent;
12 }
![](http://images2015.cnblogs.com/blog/915085/201603/915085-20160317155028584-1803545697.png)
![](http://m.sbmmt.com/m/article/file:///C:/Users/Administrator/AppData/Local/YNote/data/qq93D3C6F26FECE62E0229E96C9E5379AC/d97361829c6c4b3aac52bc85eea3b086/ms%5B%257~i34c)t.png)
![](http://images2015.cnblogs.com/blog/915085/201603/915085-20160317155048209-1059883671.png)
![](http://m.sbmmt.com/m/article/file:///C:/Users/Administrator/AppData/Local/YNote/data/qq93D3C6F26FECE62E0229E96C9E5379AC/45eb1f51abcb4910b1037ffe002369ba/lf@gpe8@2%7B%256.png)
border-style: solid dashed dashed dashed;
border-color: lightgreen transparent transparent transparent;
![](http://images2015.cnblogs.com/blog/915085/201603/915085-20160317155058412-2080684917.png)
![](http://m.sbmmt.com/m/article/file:///C:/Users/Administrator/AppData/Local/YNote/data/qq93D3C6F26FECE62E0229E96C9E5379AC/4f421a03e73a4715844d42895e5a8471/ph1z@lk9nkar.png)
border-style: dashed solid dashed dashed;
border-color: transparent pink transparent transparent;
![](http://images2015.cnblogs.com/blog/915085/201603/915085-20160317155112053-1771283135.png)
![](http://m.sbmmt.com/m/article/file:///C:/Users/Administrator/AppData/Local/YNote/data/qq93D3C6F26FECE62E0229E96C9E5379AC/0327d902b10045bd8f4a9e99d511bed8/dy%7Bk1%5Bp%25v6)q.png)
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent lightblue;
1 /* css */
2 *{
3 margin: 0px;
4 padding: 0px;
5 text-align: center;
6 }
7 #container{
8 position: relative; //这句很重要,因为小三角是相对父元素#container来绝对定位的
9 width: 50px;
10 height: 40px;
11 border:1px solid lightblue;
12 margin: 200px auto;
13 padding: 20px;
14
15 }
16 #chat{
17 width: 50px;
18 height: 40px;
19 background-color: lightblue;
20 }
21 #triangle{
22 position: absolute; //设置小三角绝对定位
23 width: 0px;
24 height: 0px;
25 *width: 14px;
26 *height: 14px;
27 font-size: 0;
28 line-height: 0;
29 overflow: hidden;
30 border-width: 7px;
31 border-style: dashed dashed dashed solid;
32 border-color: transparent transparent transparent lightblue;
33 top: 33px; //33px:父元素#container的内边距20px + #chat宽度的一半20px - 自身元素#triangle的边宽7px =33px
34 left: 70px; //70px: #chat的宽度50px + 父元素#container的内边距20px =70px
35 }
/* html代码 */