css绘制六边形


CSS id选择器实现 正六边形

用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示:

HTML代码:

1 <div id="box1"></div>2 <div id="box2"></div>3 <div id="box3"></div> 

CSS代码:

 #box1{width:0;border-left: 52px solid transparent;border-right: 52px solid transparent;border-bottom: 30px solid #6c6;    }
   #box2{width: 104px;height: 60px;background-color: #6c6;}
   #box3{width:0;border-top: 30px solid #6c6;border-left: 52px solid transparent;border-right: 52px solid transparent;}

 

 

CSS代码:

 

#box4{width:0;border-right: 30px solid #6c6;border-top: 52px solid transparent;border-bottom: 52px solid transparent;float: left;}
#box5{width: 60px;height: 104px;background-color: #6c6;float: left;}
#box6{width:0;border-left: 30px solid #6c6;border-top: 52px solid transparent;border-bottom: 52px solid transparent;float: left;}

HTML代码:

 <div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

 

CSS3 为元素实现:

 


 #hexagon { 
     width: 100px;
     height: 55px;
     background: red;
     position: relative;
      }
 #hexagon:before {
     content: "";
     position: absolute;
     top: -25px;
     left: 0;
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 25px solid red;
     }
  #hexagon:after {
       content: "";
       position: absolute;
       bottom: -25px;
       left: 0;
       width: 0;
       height: 0;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       border-top: 25px solid red;
      }


 


上一篇 下一篇