码迷,mamicode.com
首页 > Web开发 > 详细

使用css绘制六边形

时间:2015-07-03 13:50:13      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:


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

技术分享 

接下来,就是代码了:

 

CSS:

<style>
    #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;}
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div> 

 


 

</style> 


 如果做成下面这种形状,可以将上面做的进行旋转或者采用浮动的方式:

技术分享 

 代码:

#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;}

<div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>

使用css绘制六边形

标签:

原文地址:http://www.cnblogs.com/wmmang-blog/p/4618257.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!