canrun
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 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>css border 三角形</title> 7 <style> 8 #test1 { 9 width:0; 10 border-color:red yellow green blue ; 11 border-style:solid; 12 border-width:100px 100px 100px 100px ; 13 } 14 #test2 { 15 *width:0; 16 border-color:red yellow green blue ; 17 border-style:solid; 18 border-width:100px 100px 100px 100px ; 19 } 20 #test3 { 21 width:0; 22 border-color:red yellow green blue ; 23 border-style:solid; 24 border-width:0px 100px 100px 100px ; 25 } 26 #test4 { 27 width:0; 28 border-color:red yellow green blue ; 29 border-style:solid; 30 border-width:100px 0px 100px 100px ; 31 } 32 #test5 { 33 width:0; 34 border-color:red yellow green blue ; 35 border-style:solid; 36 border-width:100px 100px 0px 100px ; 37 } 38 #test6 { 39 width:0; 40 border-color:red yellow green blue ; 41 border-style:solid; 42 border-width:100px 100px 100px 0px ; 43 } 44 #test7 { 45 width:0; 46 border-color:red yellow green blue ; 47 border-style:solid; 48 *border-width:100px 100px 100px 100px ; 49 } 50 51 #test8 { 52 width:0; 53 border-color:red yellow transparent blue ; *transparent 表示透明; 54 border-style:solid; 55 *border-width:100px 100px 100px 100px ; 56 } 57 .clr { 58 height:10px; 59 } 60 </style> 61 </head> 62 <body> 63 <div id="test1"></div> 64 65 <div class="clr"></div> 66 67 <div id="test2"></div> 68 69 <div class="clr"></div> 70 71 <div id="test3"></div> 72 73 <div class="clr"></div> 74 75 <div id="test4"></div> 76 77 <div class="clr"></div> 78 79 <div id="test5"></div> 80 81 <div class="clr"></div> 82 83 <div id="test6"></div> 84 85 <div class="clr"></div> 86 87 <div id="test7"></div> 88 89 <div class="clr"></div> 90 91 <div id="test8"></div> 92 93 <a href="http://www.pigzz.com/201102/022TY42011.html">（转）小猪站长学院</a> 94 95 关联文章推荐：纯CSS打造兼容各种浏览器的几何图形 96 </body> 97 </html>