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

最新推荐文章于 2026-05-02 10:01:49 发布

原创

最新推荐文章于 2026-05-02 10:01:49 发布 · 5.3k 阅读

标签

#CSS #六边形图片 #蜂巢图集 #CSS样式

收录于

本文介绍了一种使用HTML和CSS实现六边形图片布局的方法，通过旋转和叠加多个div来形成蜂巢形状的图集展示，适用于网页设计中的创意布局。

目标效果：

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

实现思路：

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;