如何用CSS做六边形图片/蜂巢形图集（详解）

目标效果：

要达到蜂巢形的图集展示，实质上就是做六边形图片。

实现思路：

1.一个大div内有两个子div，分别将两个div顺时针和逆时针旋转60度，形成六边形；

2.给三个div加同一个背景，调节背景大小和位置，使得三张图片完全重合，形成六边形图片效果；

3.复制粘贴5个六边形，并做flex布局。

第一步：画出3个div

第二步：

2-1 给1一个div加同一个背景图片并调节位置，大小：

2-2 给另外两个div也加上背景，并调节角度：

2-3 调节背景图片位置，使得三张图片完全重合，形成六角形图片效果：

附上单个六边形完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>bee</title><style>.rotate{position:relative;height:110px;width:190px;margin:100px 10px;background:url('./face.jpg'); /*给div设置背景图*/background-size:auto 220px;                  /*六边形上下两个对角是220，所以需要保证图片有220px*/background-position: -15px -55px;            /*图片需要上移15px，左移55px才能保证后期和另外两个div的背景重叠时能构成一张完整的图*/}.common{position: absolute;height:100%;width:100%;overflow: hidden;left:0;}.common:before{content:'';position: absolute;background:url('./face.jpg') 50% 50% no-repeat;background-size:auto 220px;width:190px;height:220px;}.green{transform: rotate(60deg);  /*绿色div顺时针旋转60°*//* border:3px solid green; */}.green:before{transform: rotate(-60deg) translate(48px,-28px)}.red{transform: rotate(-60deg); /*红色div逆时针旋转60°*//* border:1px solid red; */}.red:before{transform: rotate(60deg) translate(-48px,-28px)}</style>
</head>
<body><div class="rotate"><div class="green common"></div><div class="red common"></div></div>
</body>
</html>

第三步：布局

3-1 复制粘贴5个六边形，并将上面三个六边形和下面两个分别放进a标签后再放入父div内：

 <div class="box box1">   <!--flex布局是对父元素进行操作，所以在第一行六边形外套一个div--><a href="#">      <!--加伪类选择器hover，所以把六边形放在a标签内--><div class="rotate "><div class="green common"></div><div class="red common"></div></div></a><a href="#"><div class="rotate "><div class="green common"></div><div class="red common"></div></div></a><a href="#"><div class="rotate "><div class="green common"></div><div class="red common"></div></div></a></div><div class="box">  <!--flex布局是对父元素进行操作，所以在第二行六边形外套一个div--><a href="#"><div class="rotate "><div class="green common"></div><div class="red common"></div></div></a><a href="#"><div class="rotate "><div class="green common"></div><div class="red common"></div></div></a></div>

3-2 flex布局，调整六边形位置，并加上鼠标悬停动画：

        .box{display: flex;justify-content:center;                      /*子元素的六边形居中显示*/}.box1{margin-top:80px;                             /*调节第一行六边形距离浏览器顶部位置*/}.rotate:hover{transform:translate(-5px,-5px);              /*当鼠标hover在六边形上时向左上位移5px*/}

最后，附上完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>bee</title><style>.box{display: flex;justify-content:center;                      /*子元素的六边形居中显示*/}.box1{margin-top:80px;                             /*调节第一行六边形距离浏览器顶部位置*/}.rotate{position:relative;height:110px;width:190px;margin:37px 10px;background:url('./face.jpg');                /*给div设置背景图*/background-size:auto 220px;                  /*六边形上下两个对角是220，所以需要保证图片有220px*/background-position: -15px -55px;            /*图片需要上移15px，左移55px才能保证后期和另外两个div的背景重叠时能构成一张完整的图*/}.rotate:hover{transform:translate(-5px,-5px);              /*当鼠标hover在六边形上时向左上位移5px*/}.common{position: absolute;height:100%;width:100%;overflow: hidden;left:0;}.common:before{content:'';position: absolute;background:url('./face.jpg') 50% 50% no-repeat;background-size:auto 220px;width:190px;height:220px;}.green{transform: rotate(60deg);  /*绿色div顺时针旋转60°*//* border:3px solid green; */}.green:before{transform: rotate(-60deg) translate(48px,-28px)}.red{transform: rotate(-60deg); /*红色div逆时针旋转60°*//* border:1px solid red; */}.red:before{transform: rotate(60deg) translate(-48px,-28px)}</style>
</head>
<body><div class="box box1">   <!--flex布局是对父元素进行操作，所以在第一行六边形外套一个div--><a href="#"><div class="rotate "><div class="green common"></div><div class="red common"></div></div></a><a href="#"><div class="rotate "><div class="green common"></div><div class="red common"></div></div></a><a href="#"><div class="rotate "><div class="green common"></div><div class="red common"></div></div></a></div><div class="box">  <!--flex布局是对父元素进行操作，所以在第二行六边形外套一个div--><a href="#"><div class="rotate "><div class="green common"></div><div class="red common"></div></div></a><a href="#"><div class="rotate "><div class="green common"></div><div class="red common"></div></div></a></div>
</body>
</html>

如有不妥之处，欢迎交流指正！

如何用CSS做六边形图片/蜂巢形图集（详解）相关推荐

css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
window safari 怎么进入响应式_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
HTML字母导航栏怎么做,如何用css做导航栏？
如何用css做导航栏? 1.新建一个html文件,在head部分,编写css样式 ○ list-style-type: none;是除掉导航前面默认带的点 ○ li a,li a.active ,li ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
如何用PPT做九宫格图片？来了解一下吧
今天给大家分享一个神奇的PPT小技巧,如何用PPT做九宫格图片?不会的小伙伴可以看一下,3分钟就能学会的小技巧哦! 第一步:在PPT中插入图片点击"插入",选择一张图片即可. 第 ...
html如何将图片做成六边形,css实现六边形图片的示例代码
本文主要介绍了css实现六边形图片的示例代码,分享给大家,具体如下: 不说别的,先上效果: 用简单的div配合伪元素,即可'画出'这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边 ...
【4003】通过html+css做一个图片列表的静态页面。
[4003]通过html+css做一个图片列表的静态页面. 学习目标: [ 1]学习前端第三天掌握 html与css(基础选择器,有.无序列表相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知 ...
拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...

如何用CSS做六边形图片/蜂巢形图集（详解）

如何用CSS做六边形图片/蜂巢形图集（详解）相关推荐

最新文章

热门文章