[分享]css3手机六边形图片墙排版

CSS3手机六边形图片墙排版是一种热门的网页设计风格，可以为网站添加个性化的视觉效果。

/* CSS代码 */
.hexagon {
  position: relative;
  width: 300px;
  height: 173.21px;
  background-color: #64C7CC;
  margin: 86.60px 0;
  float:left;
    margin-left: 25px;
    margin-top: 10px;
}
.hexagon:before,
.hexagon:after {
 position: absolute;
 content: "";
 width: 0;
 border-left: 150px solid transparent;
 border-right: 150px solid transparent;
}
.hexagon:before {
 bottom: 100%;
 border-bottom: 86.60px solid #64C7CC;
}
.hexagon:after {
 top: 100%;
 width:0;
 border-top: 86.60px solid #64C7CC;
}
img{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
} 

这段代码中，.hexagon代表六边形容器，通过设置宽度、高度和背景颜色来定义容器样式。.hexagon:before和.hexagon:after分别代表六边形上下两部分，通过设置border属性来实现六边形的形状。img标签则是嵌套在.hexagon标签内的图片元素，通过设置宽度、高度和定位来占据六边形容器的位置。

在使用这段代码时，需要注意六边形容器宽高比的设置，以及图片的大小与容器的匹配，以保证显示效果完美。