如何为六边形Div添加内部白色边框？尝试border属性无效

原代码通过clip-path和goo滤镜实现了六边形图片容器，但直接为.hexagon添加border属性无法显示边框。以下是可行的解决方案：

修改后的代码 #

CSS #

.hexagon {
  width: 200px;
  display: inline-block;
  margin: 0 5px;
  position: relative; /* 作为内部元素的定位容器 */
}

.mask {
  display: block;
  background: orange;
  padding-top: 115%; /* 100%/cos(30)，维持六边形比例 */
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
}

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  object-fit: cover; /* 保证图片适配容器比例 */
}

/* 生成内部白色边框的伪元素 */
.hexagon::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  border: 4px solid white;
  pointer-events: none; /* 不干扰图片的交互事件 */
}

HTML #

<div class="hexagon">
  <div class="mask">
    <img src="https://images.unsplash.com/photo-1724884564497-f5024b7e2f93?q=80&w=257" />
  </div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop" />
    </filter>
  </defs>
</svg>

关键说明 #

1. 原方法失效原因：clip-path会裁剪掉元素的边框区域，且goo滤镜会干扰边框渲染，直接添加border无法显示。
2. 伪元素方案逻辑：
   • 利用伪元素创建一个与容器同形状的六边形，通过top/bottom/left/right控制边框的间距
   • 给伪元素设置白色边框，叠加在图片上层，形成内部边框效果
   • 添加pointer-events: none确保边框不会阻挡图片的点击等交互

内容的提问来源于stack exchange，提问作者base