css3六边形图片布局 |css中怎么显示斜线

.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伪元素，分别再创建两个六边形图形，遮盖住原图形的两个边。这样，就形成了一个六边形图形。

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

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