使用CSS样式,制作六边形


 



          在制作网上中,经常会遇到绘制其它不规则的图形,如六边形,八边形这类的,在复杂的图形,也是由我们的基本图形组成了,如上面的六边形,就是由两个三角形,一个矩形组成。 
   先看看,如何绘制三角形 ,与四边形。         三角形: 
                      <div class="triangle"></div> 
                      .triangle{ 
                           width: 0px;   
                          height: 0px;   
                         border-width: 80px; 
                          border-color:transparent transparent green; 
                          border-style: solid; 
                      } 
         注: 将宽与高设置为0,设置边框的宽度,及样式的样式,最后将上,左,右边的边框,设置成透明色,这样我们就可以得到想到的三角形。 
        如图:   

            四边形: 
                      与三角形设置类似,不同的是,需要设置div的宽度,我们需要一个小的四边形与一个大的四边形,改变宽度的大小即可: 
                        <div class="fourangle"></div> 
                        <div class="fourangle2"></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; 
                            } 
               效果如图: 
                     




     完整六边形代码如下: 
<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
        #shape{ 
            margin: 200px 0px 0px 200px; 
            position: relative; 
            width: 300px; 
            height: 500px; 
            /*border: 1px solid red;*/ 

          overflow: hidden; 
          background-image: url("img/bg/bg1.png"); 
            background-position: center; 
        } 
        #div1{ 
            position: absolute; 
            top:-150px; 
            width: 0px; 
            height: 0px; 
            border-width: 150px;  
 
          border-color:white white transparent; 
          border-style: solid; 

        } 
        #rect{ 
            /*border: 1px solid green;*/ 
            position: absolute; 
            top:150px; 
            width: 300px; 
            height: 200px; 

        } 
        #div2{ 
            position: absolute; 
            top:350px; 
            width: 0px; 
            height: 0px; 
            border-width: 150px; 

           border-color:transparent white; 
           border-style: solid; 

        } 
    </style> 
</head> 
<body> 
   <div id="shape"> 
       <div id="div1"></div> 
       <div id="rect"></div> 
       <div id="div2"></div> 
   </div> 
</body> 
</html>

posted @ 2017-09-26 09:23  golddemon  阅读(1051)  评论(0编辑  收藏  举报