您的位置：首页 > Web前端 > CSS

利用css做制作蜂窝布局

2015-12-07 00:00 1191 查看

摘要: 产品经理脑洞大开，要我给他做一个蜂窝效果的页面，图片存放其中。这需求听上去能做，但问题是——我好像是写PHP的-_-！但转念一想，我既然连世界最好的语言PHP都能驾驭，这种需求又算什么呢？就给他做了算了

六边形可以看成由三个一样的长方形组成，所以最初的思路是准备三个相同的div，并让其脱离文档流，并进行旋转就行了。按照这一思路

css代码：

.content{width: 80%;margin: 120px auto;}
.box{width: 150px;height: 86px;position: relative;}
.boxL,.boxR,.boxM{width: 150px;height: 86px;position: absolute;}
.boxL{transform:rotate(60deg);background: rgba(225, 89, 89, 0.5);}
.boxR{transform:rotate(120deg);background: rgba(89, 215, 225, 0.5);}
.boxM{background: rgba(43, 236, 45, 0.5);}

html代码

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="content">
<div class="box">
<div class="boxL"></div>
<div class="boxR"></div>
<div class="boxM"></div>
</div>
</div>
</body>
</html>

最后获得如下的六边形：

本来以为这样应该差不多了，但这样却产生了一个问题，三个div都是同级的，把图片放置在任一一个div中只能在一个div中显示，并无法延伸到其他div，而需求是图片以蜂窝状显示图片，这样明显不符合需求

图片无法跨div显示

到这里发现利用div的叠加（并集）难以实现图片以六边形的形式显示，换一种思路——三个div的交集刚好也是一个六边形，相当于三个宽度为原div高度的长方形叠加起来六边形，所以，现在的思路转为利用三个div相互遮盖，将三个div嵌套，借助css的overflow属性即可实现。

css代码：

.content{width: 80%;margin: 120px auto;}
.box{width: 150px;height: 86px;position: relative;}
.boxL,.boxR,.boxM{width: 300px;height: 172px;position: absolute;overflow: hidden;visibility: hidden;}
.boxL{transform:rotate(60deg);background: rgba(225, 89, 89, 0.5);}
.boxR{transform:rotate(60deg);background: rgba(89, 215, 225, 0.5);}
.boxM{transform:rotate(-120deg);background: rgba(43, 236, 45, 0.5);visibility:visible;}

html代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="content">
<div class="box">
<div class="boxL">
<div class="boxR">
<div class="boxM"></div>
</div>
</div>
</div>
</div>
</body>
</html>

利用overflow:hidden遮盖子div，然后将外两层的div设置为不可见，最内层div设设置为可见，即可完成所需六边形的构造

最后设置最内层的div的背景图片，或放置图片进去，最后的最后配合php或js按设计进行布局和加特效，这个需求就算差不多了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航