文档章节

利用css做制作蜂窝布局

E
 East_huang
发布于 2015/12/07 01:40
字数 633
阅读 53
收藏 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
汕头
Tiny快速入门之Web界面快速开发实践

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

悠悠然然
2014/11/25
0
43
垂直居中实现方式总结

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

呵呵闯
2016/12/05
16
0
每周一书-《Bootstrap基础教程》

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

zting科技
2017/01/11
0
0
如何让div中的内容垂直居中

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

文文1
2015/09/21
25.5K
0
css的盒子模型

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

邮币财富-张起荣
03/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7防火墙firewalld操作

firewalld Linux上新用的防火墙软件,跟iptables差不多的工具。 firewall-cmd 是 firewalld 的字符界面管理工具,firewalld是CentOS7的一大特性,最大的好处有两个:支持动态更新,不用重启服...

dingdayu
今天
1
0
关于组件化的最初步

一个工程可能会有多个版本,有国际版、国内版、还有针对各种不同的渠道化的打包版本、这个属于我们日常经常见到的打包差异化版本需求。 而对于工程的开发,比如以前的公司,分成了有三大块业...

DannyCoder
今天
2
0
Spring的Resttemplate发送带header的post请求

private HttpHeaders getJsonHeader() { HttpHeaders headers = new HttpHeaders(); MediaType type = MediaType.parseMediaType("application/json; charset=UTF-8"); ......

qiang123
昨天
3
0
Spring Cloud Gateway 之 Only one connection receive subscriber allowed

都说Spring Cloud Gateway好,我也来试试,可是配置了总是报下面这个错误: java.lang.IllegalStateException: Only one connection receive subscriber allowed. 困扰了我几天的问题,原来...

ThinkGem
昨天
26
0
学习设计模式——观察者模式

1. 认识观察者模式 1. 定义:定义对象之间一种一对多的依赖关系,当一个对象状态发生变化时,依赖该对象的其他对象都会得到通知并进行相应的变化。 2. 组织结构: Subject:目标对象类,会被...

江左煤郎
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部