文档章节

利用css做制作蜂窝布局

E
 East_huang
发布于 2015/12/07 01:40
字数 633
阅读 56
收藏 0

 六边形可以看成由三个一样的长方形组成,所以最初的思路是准备三个相同的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按设计进行布局和加特效,这个需求就算差不多了

© 著作权归作者所有

共有 人打赏支持
E
粉丝 1
博文 3
码字总数 2309
作品 0
汕头
私信 提问
如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直...

文文1
2015/09/21
25.5K
0
垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

呵呵闯
2016/12/05
16
0
Tiny快速入门之Web界面快速开发实践

前面讲了基于Tiny做服务,这篇来讲讲用Tiny怎么做界面。f 下面是一些常用的链接,供大家使用: GIT地址(必须是OSC家的):https://git.oschina.net/tinyframework/tiny 问题报告:https://git...

悠悠然然
2014/11/25
0
43
css的盒子模型

网页布局的本质就是把网页中的元素,例如文字。图片等放在一个盒子里,然后利用css来摆放盒子达成想要的效果,就是网页布局 css的三大模型 1.普通流 2.浮动 元素添加浮动以后,会自动转换成行...

邮币财富-张起荣
03/12
0
0
每周一书-《Bootstrap基础教程》

首先说明,本周活动有效时间为8月15日到21日。本周为大家送出的书是有电子工业出版,贺臣/陈鹏编著的《Bootsrap基础教程》,为前端入门必读书籍。 下面是从书中摘录的内容。 “ Bootstrap 讨...

zting科技
2017/01/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《Maven官方文档》-Maven依赖机制简介

《Maven官方文档》-Maven依赖机制简介 原文地址 译者:Tyrian 依赖机制是Maven最为用户熟知的特性之一,同时也是Maven所擅长的领域之一。单个项目的依赖管理并不难, 但是当你面对包含数百个...

tantexian
15分钟前
1
0
基于 Docker 快速部署多需求 Spark 自动化测试环境

引言 在进行数据分析时,Spark 越来越广泛的被使用。在测试需求越来越多、测试用例数量越来越大的情况下,能够根据需求快速自动化部署 Spark 环境、快速完成所有测试越来越重要。 本文基于 ...

呐呐丶嘿
33分钟前
2
0
支付宝APP支付之查看支付宝商户ID

1、登录支付宝蚂蚁金服开放平台 2、查看账号详情,选择合作伙伴管理,账户管理,查看角色身份,此处的PID就是商户ID 3、点击秘钥管理,可查看绑定的相关应用及其APPID等信息

Code辉
36分钟前
2
0
崛起于Springboot2.X之通讯WebSocket(40)

技术简介:Springboot2.0.3+freemaker+websocket 1、添加pom依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-bo......

木九天
44分钟前
1
0
Java常用四大线程池用法以及ThreadPoolExecutor详解

为什么用线程池? 1.创建/销毁线程伴随着系统开销,过于频繁的创建/销毁线程,会很大程度上影响处-理效率 2.线程并发数量过多,抢占系统资源从而导致阻塞 3.对线程进行一些简单的管理 在Java中...

孟飞阳
46分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部