利用css做制作蜂窝布局
利用css做制作蜂窝布局
East_huang 发表于2年前
利用css做制作蜂窝布局
  • 发表于 2年前
  • 阅读 38
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 产品经理脑洞大开,要我给他做一个蜂窝效果的页面,图片存放其中。这需求听上去能做,但问题是——我好像是写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按设计进行布局和加特效,这个需求就算差不多了

共有 人打赏支持
粉丝 1
博文 3
码字总数 2309
×
East_huang
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: