如何为CSS Clip-path实现的箭头元素添加边框

这个问题我之前也碰到过！clip-path裁剪后的元素确实没办法直接用border属性加边框，因为边框属于元素盒模型的一部分，会和元素主体一起被clip-path裁剪掉。给你两个实用的解决方案：

方法一：用伪元素模拟边框 #

核心思路是用伪元素（比如::before）生成一个比原箭头稍大的“底层箭头”，设置它的背景色作为边框颜色，然后让原箭头（背景透明）叠在上面，模拟出边框效果：

.arrow {
  width: 40px;
  height: 121px;
  /* 原元素背景设为透明 */
  background: transparent;
  -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  position: absolute;
  right: -41px;
  z-index: 2; /* 确保原元素在伪元素上方 */
  top: -1px;
}

.arrow::before {
  content: '';
  position: absolute;
  top: -1px; /* 向外扩展1px作为边框宽度 */
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: #000; /* 边框颜色 */
  -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  z-index: -1; /* 伪元素在底层 */
}

你可以通过调整伪元素的top/left/right/bottom值来改变边框的粗细，比如想要2px边框就改成-2px。

方法二：改用SVG绘制箭头（更推荐） #

如果你的场景允许，用SVG绘制箭头是更优雅的方案——SVG的路径天然支持stroke（边框）和fill（填充）属性，完全不会有clip-path的边框问题：

<!-- 替换原来的<div class="arrow"></div> -->
<svg class="arrow" viewBox="0 0 40 121" xmlns="http://www.w3.org/2000/svg">
  <path d="M0,0 L30,0 L40,60.5 L30,121 L0,121 Z" 
        fill="transparent" 
        stroke="#000" 
        stroke-width="1"/>
</svg>

对应的CSS可以简化成：

.arrow {
  width: 40px;
  height: 121px;
  position: absolute;
  right: -41px;
  z-index: 1;
  top: -1px;
}

这个方法的好处是：

• 可以直接通过stroke-width调整边框粗细，stroke调整边框颜色
• SVG是矢量图形，缩放不会失真
• 不需要额外的伪元素，代码更简洁

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