1，向上的三角
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>border-radius</title>
6 <style>
7 div{
8 width:0;
9 height:0;
10 border-left:20px solid transparent;
11 border-right:20px solid transparent;
12 border-bottom:20px solid #ccc;
13 }
14 </style>
15 </head>
16 <body>
17 <div>
18 </div>
19 </body>
20 </html>
2，向下的三角
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>border-radius</title>
6 <style>
7 div{
8 width:0;
9 height:0;
10 border-left:20px solid transparent;
11 border-right:20px solid transparent;
12 border-top:20px solid #ccc;
13 }
14 </style>
15 </head>
16 <body>
17 <div>
18 </div>
19 </body>
20 </html>
3，向左的三角
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>border-radius</title>
6 <style>
7 div{
8 width:0;
9 height:0;
10 border-top:20px solid transparent;
11 border-bottom:20px solid transparent;
12 border-right:20px solid #ccc;
13 }
14 </style>
15 </head>
16 <body>
17 <div>
18 </div>
19 </body>
20 </html>
4，向右的三角
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>border-radius</title>
6 <style>
7 div{
8 width:0;
9 height:0;
10 border-top:20px solid transparent;
11 border-bottom:20px solid transparent;
12 border-left:20px solid #ccc;
13 }
14 </style>
15 </head>
16 <body>
17 <div>
18 </div>
19 </body>
20 </html>