css绘制六边形

CSS id选择器实现正六边形

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

HTML代码：

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

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

 <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:;

     width:;

     height:;

     border-left: 50px solid transparent;

     border-right: 50px solid transparent;

     border-bottom: 25px solid red;

 }

 #hexagon:after {

     content: "";

     position: absolute;

     bottom: -25px;

     left:;

     width:;

     height:;

     border-left: 50px solid transparent;

     border-right: 50px solid transparent;

     border-top: 25px solid red;

 }

巴特西

css绘制六边形

最新文章

热门文章