帮我用css写一段代码：六边形的图片带边框

以下是使用CSS实现带边框的六边形图片的代码：

HTML代码：

<div class="hexagon">
  <img src="your-image-url.jpg" alt="Your Image">
</div>

CSS代码：

.hexagon {
  position: relative;
  width: 150px;
  height: 86.6px;
  margin: 43.3px 0;
}

.hexagon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index: 2;
}

.hexagon:before {
  top: -43.3px;
  border-bottom: 43.3px solid #333;
}

.hexagon:after {
  bottom: -43.3px;
  border-top: 43.3px solid #333;
}

.hexagon:before,
.hexagon img,
.hexagon:after {
  border: 5px solid #333;
  box-sizing: border-box;
}

代码解释：

.hexagon类定义了六边形容器的样式，包括宽度、高度、相对定位和外边距。
.hexagon img类定义了图片的样式，包括绝对定位、宽度、高度、对象适应性（object-fit）和图层顺序（z-index）。
.hexagon:before和.hexagon:after伪元素用于创建六边形的上下边框。
.hexagon:before伪元素的样式包括相对定位、顶部偏移、下边框和左右斜边。
.hexagon:after伪元素的样式包括相对定位、底部偏移、上边框和左右斜边。
.hexagon:before、.hexagon img和.hexagon:after三个元素的边框样式都相同，包括边框宽度、颜色和盒模型（box-sizing）。