你的位置:首页 > 网页设计

[网页设计]关于CSS3三角的实现


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>