文档章节

利用css做制作蜂窝布局

E
 East_huang
发布于 2015/12/07 01:40
字数 633
阅读 43
收藏 0
点赞 0
评论 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 ⋅ 43

垂直居中实现方式总结

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

呵呵闯 ⋅ 2016/12/05 ⋅ 0

每周一书-《Bootstrap基础教程》

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

zting科技 ⋅ 2017/01/11 ⋅ 0

如何让div中的内容垂直居中

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

文文1 ⋅ 2015/09/21 ⋅ 0

css的盒子模型

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

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

【京东商城首页实战11】制作轮播图

上一节咱们添加了通栏背景并了解了布局思路,下面就开始做轮播图啦! 附上轮播图图片: 分析: 1.轮播图左右切换按钮和轮播序号都显示在图片上,所以可以利用定位来做。 2.轮播序号是一个盒子...

sinat_34647836 ⋅ 2017/05/04 ⋅ 0

43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程

在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

关于div+css布局

div的元素布局加上css的样式表 布局知识: DIV+CSS布局,CSS布局是网页html通过div标签+css样式表代码开发制作的(html)网页的统称。 div+css布局好处:便于维护 制作div+css网页前思考布局...

形参思 ⋅ 2014/07/21 ⋅ 0

给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

flex页面和传统页面的比较

公司之前做了很多flex页面的网站,是指整个页面都用flex来实现。由于一些原因最近要开始使用div+css来制作页面。在此总结下我这边理解的flex和div+css网页实现的比较。 flex的优点: 1.效果绚...

taojinhuo ⋅ 2011/08/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

懒惰根本就不存在

简评:芝加哥大学心理学教授,懒惰根本就不存在。(本文表面讲行为心理学实则讲教育) 金句:以好奇而不是判断来回应一个人的无效行为,是非常有帮助的。 本文「我」代表原作者 E Price。 自...

极光推送 ⋅ 21分钟前 ⋅ 0

Excel提取单元格中最后一个“.”后面的数据

java.lang.String ----- String =TRIM((MID(SUBSTITUTE(B2,".",REPT(" ",99)),(LEN(B2)-LEN(SUBSTITUTE(B2,".","")))*99,99)))...

klog ⋅ 23分钟前 ⋅ 0

mac远程桌面

下载安装remote-desktop-mac Mac beta 客户端 mac通过远程桌面访问windows服务器。

亚林瓜子 ⋅ 27分钟前 ⋅ 0

firrtl

动手---sbt(2)之后,再回头看 chisel第一个实验,根据 https://github.com/freechipsproject/firrtl 发现firrtl没有执行sbt assembly命令,重新执行这个命令,结果成功。如下图: joe@joe-As...

whoisliang ⋅ 31分钟前 ⋅ 0

NIO

一、通道(Channel):用于源节点与目标节点的连接。在 Java NIO 中负责缓冲区中数据的传输。Channel 本身不存储数据,因此需要配合缓冲区进行传输。 二、通道的主要实现类 java.nio.channel...

stars永恒 ⋅ 32分钟前 ⋅ 0

Android悬浮窗的实现

0. 前言   现在很多应用都使用到悬浮窗,例如微信在视频的时候,点击Home键,视频小窗口仍然会在屏幕上显示。这个功能在很多情况下都非常有用。那么今天我们就来实现一下Android悬浮窗,以...

猴亮屏 ⋅ 32分钟前 ⋅ 0

日志采集中的关键技术分析

概述 日志从最初面向人类演变到现在的面向机器发生了巨大的变化。最初的日志主要的消费者是软件工程师,他们通过读取日志来排查问题,如今,大量机器日夜处理日志数据以生成可读性的报告以此...

tqyin ⋅ 33分钟前 ⋅ 0

使用Navicat将数据导出为text文本 然后再导入

将数据导出为text文本效率很高 1. 准备工作 1.1 准备表结构 1.2 目标库 执行生成表结构sql 2.将表数据导出为text文本 生成的text文本 3. 目标库 导入text 4.效果...

Lucky_Me ⋅ 39分钟前 ⋅ 0

IntelliJ IDEA 乱码解决方案 (项目代码、控制台等)

文章介绍了idea下,项目乱码、控制台乱码及运行tomcat控制台乱码的解决方案,文章链接:https://www.cnblogs.com/vhua/p/idea_1.html

Funcy1122 ⋅ 42分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 47分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部