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

最新推荐文章于 2024-01-31 15:06:01 发布

大陀螺

最新推荐文章于 2024-01-31 15:06:01 发布

阅读量4.5k

点赞数 6

分类专栏： CSS 文章标签： CSS 六边形图片蜂巢图集 CSS样式

本文链接：https://blog.csdn.net/Akikang/article/details/84901496

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

目标效果：

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

实现思路：

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>

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