使用CSS样式，制作六边形

 



          在制作网上中，经常会遇到绘制其它不规则的图形，如六边形，八边形这类的，在复杂的图形，也是由我们的基本图形组成了，如上面的六边形，就是由两个三角形，一个矩形组成。 
   先看看，如何绘制三角形 ，与四边形。         三角形： 
                     

 
                      .triangle{ 
                           width: 0px;   
                          height: 0px;   
                         border-width: 80px; 
                          border-color:transparent transparent green; 
                          border-style: solid; 
                      } 
         注： 将宽与高设置为0，设置边框的宽度，及样式的样式，最后将上，左，右边的边框，设置成透明色，这样我们就可以得到想到的三角形。 
        如图：   

            四边形： 
                      与三角形设置类似，不同的是，需要设置div的宽度，我们需要一个小的四边形与一个大的四边形，改变宽度的大小即可： 
                       

 
                       

          
                         .fourangle{ 
                                    width: 70px;   
                                   height: 0px;   
                                   border-width: 80px; 
                                    border-color:transparent transparent green; 
                                    border-style: solid; 
                            } 
                            .fourangle2{ 
                                    width: 100px;   
                                   height: 0px;   
                                   border-width: 80px; 
                                    border-color:transparent transparent green; 
                                    border-style: solid; 
                            } 
               效果如图： 
                     




     完整六边形代码如下： 
 
 
 
     
     
     
 
 
  

 
      

 
      

 
      

 
  

 
 

转载于:https://www.cnblogs.com/doubolexiang/p/7222423.html