一. 效果图
二、原理讲解
这个效果用到的主要知识点就是 ：transform: rotate(120deg); 和 overflow: hidden;
我们需要用到3层div进行旋转来得到这个效果，并且3层 div 的大小是一样的。第一层 div(box1) 旋转 120 度，第二层 div(box2) 旋转 -60 度，第三层 div(box3) 再旋转 -60 度，此时刚好回正，我们的图片就放在第3层的 div 中。经过旋转肯定有超出的部分，因此我们对外面两层 div(box1和box2) 设置 overflow:hidden; 隐藏超出部分。
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。有一点需要注意，那就是三层 div 的宽高比例必须满足 4：5，不然得到的就不是6边形了，至于得到什么形状可以自行尝试。
三、具体代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 实现六边形图片展示效果</title>
<style type="text/css">
body, div, img
{
margin: 0;
padding: 0;
}
body
{
background-color: #DDD;
}
.box
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 700px;
margin: 100px auto;
}
.line1, .line2
{
display: flex;
}
.line2
{
margin-top: -70px;
}
.box1, .box2, .box3
{
width: 200px;
height: 250px;
overflow: hidden;
}
.box1
{
transform: rotate(120deg);
margin-left: 10px;
}
.box2
{
transform: rotate(-60deg);
}
.box3
{
transform: rotate(-60deg);
}
.box3 img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<!-- 第一行 -->
<div class="line1">
<div class="box1">
<div class="box2">
<div class="box3">
<img src="img/img1.jpg" alt="">
</div>
</div>
</div>
<div class="box1">
<div class="box2">
<div class="box3">
<img src="img/img1.jpg" alt="">
</div>
</div>
</div>
<div class="box1">
<div class="box2">
<div class="box3">
<img src="img/img1.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- 第二行 -->
<div class="line2">
<div class="box1">
<div class="box2">
<div class="box3">
<img src="img/img1.jpg" alt="">
</div>
</div>
</div>
<div class="box1">
<div class="box2">
<div class="box3">
<img src="img/img1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
代码还是挺简单的，就那么几个样式而已，如果有不明白的可以留言，溜啦溜啦 ：）
