如何在图片周围实现分层显示的悬停空心五边形边框

嘿，我完全get到你的需求啦——就是想在图片悬停时，周围出现空心的五边形边框，而且边框的不同边有的压在图片上面、有的藏在图片下面对吧？你现在用clip-path做了实心五边形，那咱们来调整成你要的分层空心效果～

核心思路其实很简单：单个元素没法同时让部分边框在图片上、部分在图片下，所以咱们得把五边形边框拆成上下两个部分，分别用容器的伪元素来实现（不用多写额外HTML），然后通过z-index控制它们和图片的层级关系就行。

直接上可运行的代码示例：

HTML结构 #

<div class="image-container">
  <img src="你的图片链接" alt="需要加边框的图片" class="target-img">
</div>

CSS样式 #

/* 容器相对定位，方便伪元素定位 */
.image-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 20px; /* 方便看效果，可按需删除 */
}

/* 图片放在中间层级，作为视觉核心 */
.target-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，适配容器尺寸 */
  z-index: 1;
}

/* 悬停时触发两个伪元素的边框显示 */
.image-container:hover::before,
.image-container:hover::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #4169e1; /* 可自定义边框宽度、颜色 */
  background: transparent; /* 背景透明，实现空心边框效果 */
}

/* 下层边框：对应五边形的底部区域，z-index比图片低，会藏在图片下方 */
.image-container:hover::before {
  clip-path: polygon(100% 38%, 81% 100%, 19% 100%, 0 38%, 0 38%, 100% 38%);
  z-index: 0;
}

/* 上层边框：对应五边形的顶部区域，z-index比图片高，会压在图片上方 */
.image-container:hover::after {
  clip-path: polygon(50% 0, 100% 38%, 0 38%, 50% 0);
  z-index: 2;
}

效果说明 #

• 用::before和::after两个伪元素拆分五边形边框，通过clip-path剪裁出需要显示的边框区域；
• 给图片设置z-index:1，让它夹在两个伪元素中间，自然形成部分边框在图上、部分在图下的分层效果；
• 边框用border实现、背景设为透明，完美替代你之前的实心五边形，实现空心效果；
• 你可以随时调整border的宽/颜色，或者clip-path的坐标值，来微调边框的形状和位置，直到完全匹配你的设计图～

内容来源于stack exchange