css边框并不是一个矩形。看下面的代码：

  1. <html> 
  2.     <head> 
  3.         <style type="text/css"> 
  4.         .test{ 
  5.         width:20; 
  6.         height:20; 
  7.         border-bottom:20px solid red; 
  8.         border-right:20px solid blue; 
  9.         border-left:20px solid green; 
  10.         border-top:20px solid black; 
  11.         }    
  12.         </style> 
  13.      
  14.     </head> 
  15.     <body> 
  16.         <div class="test"> 
  17.         </div> 
  18.     <body> 
  19. </html> 

截图如下：

使用css边框属性画三角性_三角形

看到没有，边框是一个个矩形。但是如果我们让这个div的长度和宽度都变成0，那么结果是如何呢？看下面的截图：

 

使用css边框属性画三角性_border_02

所以如果我们让其他三个边的颜色跟背景色一样，一个边框跟背景色不同，那么三角形不就出来了吗？代码如下：

 

  1. <html> 
  2.     <head> 
  3.         <style type="text/css"> 
  4.         .test{ 
  5.         width:0; 
  6.         height:0; 
  7.         border-bottom:20px solid white; 
  8.         border-right:20px solid white; 
  9.         border-left:20px solid white; 
  10.         border-top:20px solid black; 
  11.         }    
  12.         </style> 
  13.      
  14.     </head> 
  15.     <body> 
  16.         <div class="test"> 
  17.         </div> 
  18.     <body> 
  19. </html> 

效果如下：

使用css边框属性画三角性_border_03

那么如何画出普通的三角形呢？修改下border-width就行啦。代码如下

 

  1. <html> 
  2.     <head> 
  3.         <style type="text/css"> 
  4.         .test{ 
  5.         width:0; 
  6.         height:0; 
  7.         border-bottom:20px solid white; 
  8.         border-right:20px solid black; 
  9.         border-top:30px solid white; 
  10.         }    
  11.         </style> 
  12.      
  13.     </head> 
  14.     <body> 
  15.         <div class="test"> 
  16.         </div> 
  17.     <body> 
  18. </html> 

效果如下：

使用css边框属性画三角性_三角形_04