css3六边形图片布局

CSS3提供了强大的布局功能，其中六边形布局是常用的一种。六边形布局可以用于展示图片，使图片更加有趣和美观。

.hexagon {
    width: 200px;
    height: 115px;
    position: relative;
    background: url('') no-repeat center center;
    background-size: cover;
    text-align: center;
    overflow: hidden;
}
.hexagon:before,.hexagon:after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: inherit;
    transform: rotate(60deg);
}
.hexagon:before {
    transform: rotate(-60deg);
}
.hexagon img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
    

首先，创建一个六边形的容器。为其设置合适的宽高，并且使用background属性给其设置背景图片。

接着，使用:before和:after伪元素，分别再创建两个六边形图形，遮盖住原图形的两个边。这样，就形成了一个六边形图形。

最后，在六边形容器内部加入一个图片元素，使用绝对定位和居中技巧，将图片放置在六边形中央位置。

使用这种布局技巧，可以快速创建美观的六边形图片布局，让网页的视觉效果更加丰富和有趣。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！