纯css实现小三角

实现后的效果如下：

不带边框的

带边框的

在此提供两种实现方式：

1、不带边框的

css：

[css]  view plain copy print ?

1. *{margin:0;padding:0;}  
2.         body{  
3.             background:#666;  
4.             font:14px/20px "Microsoft YaHei";  
5.             text-align: left;  
6.         }  
7.         .entry{  
8.             position: relative;  
9.             margin-left: 20px;  
10.             margin-top:20px;  
11.             width:200px;  
12.             background:#fff;  
13.             padding:10px;  
14.             /*设置圆角*/  
15.             -webkit-border-radius:5px;  
16.             -moz-border-radius:5px;  
17.             border-radius:5px;  
18.         }  
19.         /*左三角*/  
20.         .entry-trangle-left{  
21.             position:absolute;  
22.             bottom:15px;  
23.             left:-10px;  
24.             width:0;  
25.             height:0;  
26.             border-top:15px solid transparent;  
27.             border-bottom:15px solid transparent;  
28.             border-right:15px solid #fff;  
29.         }  
30.         /*右三角*/  
31.         .entry-trangle-right{  
32.             position:absolute;  
33.             top:15px;  
34.             right:-10px;  
35.             width:0;  
36.             height:0;  
37.             border-top:15px solid transparent;  
38.             border-bottom:15px solid transparent;  
39.             border-left:15px solid #fff;  
40.         }  
41.         /*上三角*/  
42.         .entry-trangle-top{  
43.             position:absolute;  
44.             top:-10px;  
45.             left:20px;  
46.             width:0;  
47.             height:0;  
48.             border-left:15px solid transparent;  
49.             border-right:15px solid transparent;  
50.             border-bottom:15px solid #fff;  
51.         }  
52.         /*下三角*/  
53.         .entry-trangle-bottom{  
54.             position:absolute;  
55.             bottom:-10px;  
56.             left:20px;  
57.             width:0;  
58.             height:0;  
59.             border-left:15px solid transparent;  
60.             border-right:15px solid transparent;  
61.             border-top:15px solid #fff;  
62.         }  

html：

[html]  view plain copy print ?

1. <div class="entry">  
2.     <div class="entry-trangle-left"><!--本Div只来实现三角形，无其他作用--></div>  
3.     hello，我出生了<br/>  
4.     hello，我出生了  
5. </div>  
6. <div class="entry">  
7.     <div class="entry-trangle-right"><!--本Div只来实现三角形，无其他作用--></div>  
8.     hello，我出生了<br/>  
9.     hello，我出生了  
10. </div>  
11. <div class="entry">  
12.     <div class="entry-trangle-top"><!--本Div只来实现三角形，无其他作用--></div>  
13.     hello，我出生了<br/>  
14.     hello，我出生了  
15. </div>  
16. <div class="entry">  
17.     <div class="entry-trangle-bottom"><!--本Div只来实现三角形，无其他作用--></div>  
18.     hello，我出生了<br/>  
19.     hello，我出生了  
20. </div>  

2、带边框的

css：

[css]  view plain copy print ?

1. /*上三角*/  
2.        .tag-top{  
3.             margin: 20px;  
4.             padding: 5px;  
5.             width:300px;  
6.             height:60px;  
7.             border:2px solid #f99;  
8.             position:relative;  
9.             background-color:#FFF;  
10.             /*设置圆角*/  
11.             -webkit-border-radius:5px;  
12.             -moz-border-radius:5px;  
13.             border-radius:5px;  
14.         }  
15.        .tag-top:before,.tag-top:after{  
16.            content:"";  
17.            display:block;  
18.            border-width:15px;  
19.            position:absolute;  
20.            top:-30px;  
21.            left:100px;  
22.            border-style:solid dashed dashed solid;  
23.            border-color:transparent  transparent #f99 transparent;  
24.            font-size:0;  
25.            line-height:0;  
26.        }  
27.        .tag-top:after{  
28.            top:-27px;  
29.            border-color: transparent transparent #FFF transparent;  
30.        }  
31.        /*下三角*/  
32.        .tag-bottom{  
33.            margin: 20px;  
34.            padding: 5px;  
35.            width:300px;  
36.            height:60px;  
37.            border:2px solid #f99;  
38.            position:relative;  
39.            background-color:#FFF;  
40.            /*设置圆角*/  
41.            -webkit-border-radius:5px;  
42.            -moz-border-radius:5px;  
43.            border-radius:5px;  
44.        }  
45.        .tag-bottom:before,.tag-bottom:after{  
46.            content:"";  
47.            display:block;  
48.            border-width:15px;  
49.            position:absolute;  
50.            bottom:-30px;  
51.            left:100px;  
52.            border-style:solid dashed dashed solid;  
53.            border-color:#f99 transparent  transparent transparent;  
54.            font-size:0;  
55.            line-height:0;  
56.        }  
57.        .tag-bottom:after{  
58.            bottom:-27px;  
59.            border-color: #FFF transparent transparent transparent;  
60.        }  
61.        /*左三角*/  
62.        .tag-left{  
63.            margin: 20px;  
64.            padding: 5px;  
65.            width:300px;  
66.            height:60px;  
67.            border:2px solid #f99;  
68.            position:relative;  
69.            background-color:#FFF;  
70.            /*设置圆角*/  
71.            -webkit-border-radius:5px;  
72.            -moz-border-radius:5px;  
73.            border-radius:5px;  
74.        }  
75.        .tag-left:before,.tag-left:after{  
76.            content:"";  
77.            display:block;  
78.            border-width:15px;  
79.            position:absolute;  
80.            left:-30px;  
81.            top:20px;  
82.            border-style:dashed solid solid dashed;  
83.            border-color:transparent #f99 transparent  transparent;  
84.            font-size:0;  
85.            line-height:0;  
86.        }  
87.        .tag-left:after{  
88.            left:-27px;  
89.            border-color:transparent #FFF transparent transparent ;  
90.        }  
91.        .tag-right{  
92.            margin: 20px;  
93.            padding: 5px;  
94.            width:300px;  
95.            height:60px;  
96.            border:2px solid #f99;  
97.            position:relative;  
98.            background-color:#FFF;  
99.            /*设置圆角*/  
100.            -webkit-border-radius:5px;  
101.            -moz-border-radius:5px;  
102.            border-radius:5px;  
103.        }  
104.        .tag-right:before,.tag-right:after{  
105.            content:"";  
106.            display:block;  
107.            border-width:15px;  
108.            position:absolute;  
109.            right:-30px;  
110.            top:20px;  
111.            border-style:dashed solid solid dashed;  
112.            border-color:transparent transparent transparent #f99;  
113.            font-size:0;  
114.            line-height:0;  
115.        }  
116.        .tag-right:after{  
117.            right:-27px;  
118.            border-color:transparent transparent  transparent #FFF ;  
119.        }  

html：

[html]  view plain copy print ?

1. <div class="tag-top">  
2.     css3气泡框  
3. </div>  
4. <div class="tag-bottom">  
5.     css3气泡框  
6. </div>  
7. <div class="tag-left">  
8.     css3气泡框  
9. </div>  
10. <div class="tag-right">  
11.     css3气泡框  
12. </div>  

此外，如若，设置边框的颜色与背景色相同，也能得到没有边框的：

css：

[css]  view plain copy print ?

1. .tag-right-noborder{  
2.            margin: 20px;  
3.            padding: 5px;  
4.            width:300px;  
5.            height:60px;  
6.            border:2px solid #FFF;  
7.            position:relative;  
8.            background-color:#FFF;  
9.            /*设置圆角*/  
10.            -webkit-border-radius:5px;  
11.            -moz-border-radius:5px;  
12.            border-radius:5px;  
13.        }  
14.        .tag-right-noborder:before,.tag-right-noborder:after{  
15.            content:"";  
16.            display:block;  
17.            border-width:15px;  
18.            position:absolute;  
19.            right:-30px;  
20.            top:20px;  
21.            border-style:dashed solid solid dashed;  
22.            border-color:transparent transparent transparent #FFF;  
23.            font-size:0;  
24.            line-height:0;  
25.        }  
26.        .tag-right-noborder:after{  
27.            right:-27px;  
28.            border-color:transparent transparent  transparent #FFF ;  
29.        }  

html：

[html]  view plain copy print ?

1. <div class="tag-right-noborder">  
2.     css3气泡框  
3. </div>  

实现后的效果：

如有疑问，可联系：

QQ：1004740957

Email：niujp08@qq.com