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

目标效果：

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

实现思路：

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

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

第一步：画出3个div

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

第二步：①给1一个div加同一个背景图片并调节位置，大小如何用CSS做六边形图片/蜂巢形图集（详解）尔给另外两个div也加上背景，并调节角度

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

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

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

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

<!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>

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