案例效果图
案例结构分析
本案例由多个六边形组成，在每个六边形内，嵌入一些文字和图片。首先，背景中最大的黑色六边形采用canvas绘制，而里面的所有的小的六边形，都是通过CSS绘制而成。本案例只对CSS绘制六边形进行分析。
本案例的结构分成一个主体container部分和一个底部footer部分，而在container部分中，按照上下结构，分为上面的menu部分，和下面的gallery-content部分。其中menu部分，包括POLYSTAR、OUR TEAM、CONTACT、SERVICES四个导航，gallery-content部分则由标题IMAGE GALLERY以及下面的7张图片组成。
案例样式分析
首先，定义三个长180px、宽144px的矩形，然后分别对矩形进行0度、60度和120度的旋转，三个矩形重叠的部分即为案例中的六边形。
根据以上原理，首先实现六边形的CSS样式，接下来通过绝对定位的方式，将每个小六边形放置在指定的位置。
案例源码
结构文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例-HTML+CSS实现六边形</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/templatemo_custom.js"></script>
</head>
<body>
<div class="container">
<div class="menu">
<div id="logo">
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2 active">
<h2>POLYSTAR</h2>
</div>
</div>
</div>
</div>
<div id="team">
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2">
<h2>OUR TEAM</h2>
</div>
</div>
</div>
</div>
<div id="services">
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2">
<h2>SERVICES</h2>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2">
<h2>CONTACT</h2>
</div>
</div>
</div>
</div>
</div>
<div id="gallery-content">
<header>
<h1>IMAGE GALLERY</h1>
</header>
<div class="content gallery" id="page1">
<div class="hexagon_container">
<div class="hexagon gallery-item">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url(images/1.jpg);">
</div>
</div>
</div>
</div>
<div class="hexagon_container">
<div class="hexagon gallery-item">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url(images/2.jpg);">
</div>
</div>
</div>
</div>
<div class="hexagon_container">
<div class="hexagon gallery-item">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url(images/3.jpg);">
</div>
</div>
</div>
</div>
<div class="hexagon_container">
<div class="hexagon gallery-item">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url(images/4.jpg);">
</div>
</div>
</div>
</div>
<div class="hexagon_container">
<div class="hexagon gallery-item">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url(images/5.jpg);">
</div>
</div>
</div>
</div>
<div class="hexagon_container">
<div class="hexagon gallery-item">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url(images/6.jpg);">
</div>
</div>
</div>
</div>
<div class="hexagon_container">
<div class="hexagon gallery-item">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url(images/7.jpg);">
</div>
</div>
</div>
</div>
</div>
<div class="pagination">
<ul>
<li id="page_link_1" class="active">1</li>
<li id="page_link_2">2</li>
<li id="page_link_3">3</li>
</ul>
</div>
</div>
</div>
<div class="templatemo_footer">
Copyright © 2022 Company Name<br>
</div>
</body>
</html>
样式文件style.css
html, body { font-family: 'Open Sans', sans-serif; font-size: 12px; padding: 0px; margin: 0px; margin-top: 10px; color: white; background: #596168; }
h1 { font-size: 30px; font-weight: 600; color: white; text-transform: uppercase; }
h2 { font-size: 22px; font-weight: 600; line-height: 144px; color: white; text-align: center; margin: 0; }
.container { position:relative; width: 894px; height: 853px; padding-left: 0; margin: 0 auto; }
.menu { position: relative; }
.menu .hexagon-in2:hover { background-color: #a2c044; }
.menu .hexagon-in2.active { background-color: #a2c044; }
#logo { position: absolute; left: 347px; top: 10px; }
#team { position: absolute; left: 197px; top: 90px; }
#services { position: absolute; left: 497px; top: 90px; }
#contact { position: absolute; left: 347px; top: 170px; }
.hexagon {
overflow: hidden;
visibility: hidden;
background-color: red;
width: 180px;
height: 144px;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 180px;
height: 144px;
background-color: blue;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
overflow: hidden;
width: 180px;
height: 144px;
background-color: #65a8dd;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);/**/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
header { position: absolute; text-align: center; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 350px; }
.content { position: absolute; top: 470px; left: 20px; width: 100%; text-align: center; }
.content .hexagon_container { display: inline-block; margin-left: -20px; }
.gallery .hexagon_container { width: 200px; height: 160px; overflow: hidden; }
.pagination { position: absolute; top: 790px; text-align: center; }
#gallery-content .pagination { left: 348.5px; }
.pagination li {
font-size: 16px;
display: inline-block;
list-style: none;
float: left;
width: 25px;
height: 25px;
background-color: #65a8dd;
margin-right: 5px;
padding: 2px;
cursor: pointer;
}
.pagination li:hover, .pagination li.active { background-color: #a2c044; }
.templatemo_footer { width: 894px; padding: 20px; margin: auto; text-align: center; }
其他资源文件
百度网盘地址： 百度网盘