CSS制作三角形

预览图：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>CSS制作三角形</title>
 6 <style>
 7 #triangle-up { 
 8             width: 0; 
 9             height: 0; 
10             border: 50px solid red;
11             border-color: transparent transparent red;
12      }
13 #triangle-down { 
14             width: 0; 
15             height: 0; 
16             border: 50px solid red;
17             border-color: red transparent transparent;
18      }
19 #triangle-left { 
20                 width: 0; 
21                 height: 0; 
22                 border: 50px solid red;
23                 border-color: transparent red transparent  transparent;
24          }
25 #triangle-right { 
26                 width: 0; 
27                 height: 0; 
28                 border: 50px solid red;
29                 border-color: transparent transparent transparent red;
30          }
31 #triangle-topleft { 
32             width: 0; 
33             height: 0; 
34             border: 50px solid red; 
35             border-color: red transparent transparent red; 
36         }
37 #triangle-topright { 
38             width: 0; 
39             height: 0; 
40             border: 50px solid red; 
41             border-color: red red transparent transparent; 
42         }
43 #triangle-bottomleft { 
44             width: 0; 
45             height: 0; 
46             border: 50px solid red; 
47             border-color: transparent transparent red red; 
48         }
49 #triangle-bottomright { 
50             width: 0; 
51             height: 0; 
52             border: 50px solid red; 
53             border-color: transparent red  red transparent; 
54         } 
55 </style>
56 </head>
57 
58 <body>
59 <div id="triangle-up"></div>
60 <div id="triangle-down"></div>
61 <div id="triangle-left"></div>
62 <div id="triangle-right"></div>
63 <div id="triangle-topleft"></div>
64 <div id="triangle-topright"></div>
65 <div id="triangle-bottomleft"></div>
66 <div id="triangle-bottomright"></div>
67 </body>
68 </html>

 

posted @ 2013-06-07 11:14  他说  阅读(160)  评论(0)    收藏  举报