用CSS画三角形

今天在网上看到一个非常好玩的写法，教人怎样用css话三角形。内容其实很简单，难的是能想出来，并且巧妙地利用好。

我用这种写法画了一个图：

css是这样写的：

<style tyepe="text/css">  
    .box{  
      width:0px;  
      height:0px;  
      border-bottom:50px solid red;  
      border-left:50px solid black;  
      border-top:50px solid green;  
      border-right:50px solid blue;                                     
    }  
</style>

利用这种写法，你可以做出这样的效果出来：

具体css如下：

 1 <html>  
 2 <head>  
 3   <style tyepe="text/css">  
 4       
 5     .box{  
 6       width:300px;  
 7       height:100px;  
 8       background-color:gray;  
 9       border:1px solid gray;  
10     }  
11     .triangle{  
12       top:100px;  
13       margin-left:15px;  
14       width:0px;  
15       height:0px;  
16       border-bottom:10px solid white;  
17       border-left:10px solid white;  
18       border-top:10px solid gray;  
19       border-right:10px solid white;                                     
20     }  
21   </style>  
22 </head>  
23 <body>  
24   <div class="box"></div>  
25   <div class="triangle"/>  
26 </body>  
27 </html>