css中如何把图片六边形显示

CSS中如何把图片六边形显示？

// HTML代码
<div class="hexagon">
  <img src="image.jpg" alt="图片">
</div>

/* CSS代码 */
.hexagon {
  width: 173.21px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.hexagon:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(image.jpg);
  background-size: cover;
  transform: rotate(30deg);
}

.hexagon:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(image.jpg);
  background-size: cover;
  transform: rotate(-30deg);
}

img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  transform: rotate(-30deg);
} 

代码解释：

首先，我们创建一个大小为173.21px * 200px的六边形div（六边形的高度为宽度的1.1547倍），并将其相对定位且溢出隐藏；

接着，通过:before伪元素和:after伪元素来创建六边形的上下两个三角形（利用旋转变换），并使用background-image属性将图片填充到三角形；

最后，将img元素绝对定位并居中，同时给定30度旋转（因为原来的三角形旋转了30度），将六边形呈现出来。