效果图：
代码结构：
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5+css实现六边形</title>
<link rel="stylesheet" href='Css/six.css'/>
</head>
<body>
<section id='six'>
<div class='six-2'>
<div class="zcc zcc-un"></div>
<div class="zcc zcc-un"></div>
<div class="zcc zcc-img1"></div>
</div>
<div class='six-2'>
<div class="zcc zcc-img2"></div>
<div class="zcc zcc-1">
<h2><span>Step4</span><br/>流程标题4</h2>
<P>流程介绍内容4</P>
</div>
<div class="zcc zcc-img3"></div>
</div>
<div class='six-2'>
<div class="zcc zcc-1">
<h2><span>Step1</span><br/>流程标题1</h2>
<P>流程介绍内容1</P>
</div>
<div class="zcc zcc-1">
<h2><span>Step3</span><br/>流程标题3</h2>
<P>流程介绍内容3</P>
</div>
<div class="zcc zcc-1">
<h2><span>Step5</span><br/>流程标题</h2>
<p>流程介绍内容5</p>
</div>
<div class="zcc zcc-1">
<h2><span>Step7</span><br/>流程标题7</h2>
<p>流程介绍内容7</p>
</div>
</div>
<div class='six-2'>
<div class="zcc zcc-1">
<h2><span>Step2</span><br/>流程标题2</h2>
<P>流程介绍内容2</P>
</div>
<div class="zcc zcc-img4"></div>
<div class="zcc zcc-1">
<h2><span>Step6</span><br/>流程标题6</h2>
<p>流程介绍内容6</p>
</div>
</div>
<div class='six-2'>
<div class="zcc zcc-img5"></div>
<div class="zcc zcc-img6"></div>
<div class="zcc zcc-img7"></div>
</div>
</section>
</body>
</html>
six.css:
html, body { width : 100%; height : 100%; margin : 0; padding : 0; }
.zcc{
width: 200px;
height: 200px;
margin:20px 50px;
position: relative;
margin-left:70px;
}
#six{
width:1210px;
margin:auto;
margin-top:100px;
}
.six-2{
overflow:hidden;
}
.six-2:nth-child(2n){
margin-left:90px;
margin-top:-148px;
}
.six-2:nth-child(2n+1){
margin-top:-147px;
margin-left:-70px;
}
#six .zcc{
float:left;
}
#six .zcc-1{
background:url('../Images/process-img2.png') no-repeat;
background-size:100% 100%;
cursor:pointer;
}
.zcc-1 p{
width:128px;
max-height:100px;
margin:auto;
margin-top:90px;
color:#FFF;
display:none;
}
#six .zcc-1:hover{
background:url('../Images/process-img1.png') no-repeat;
background-size:100% 100%;
}
.zcc-1:hover h2{display:none;}
.zcc-1:hover p{display:block;}
.zcc h2{
margin-top:50px;
height:50px;
line-height:50px;
text-align:center;
font-size:28px;
font-weight:400;
color:#333;
}
.zcc h2 span{
color:#FFF;
font-size:40px;
}
.zcc-un{
visibility: hidden;
}
#six .zcc-img1{
background:url('../Images/zcc-img0.png') no-repeat;
background-size:100% 100%;
}
#six .zcc-img2{
background:url('../Images/zcc-img2.png') no-repeat;
background-size:100% 100%;
}
#six .zcc-img3{
background:url('../Images/zcc-img3.png') no-repeat;
background-size:100% 100%;
}
#six .zcc-img4{
background:url('../Images/zcc-img0.png') no-repeat;
background-size:100% 100%;
}
#six .zcc-img5{
background:url('../Images/zcc-img0.png') no-repeat;
background-size:100% 100%;
}
#six .zcc-img6{
background:url('../Images/zcc-img4.png') no-repeat;
background-size:100% 100%;
}
#six .zcc-img7{
background:url('../Images/zcc-img1.png') no-repeat;
background-size:100% 100%;
}
Images下（图片看实际情况设计）：
