如何让图片填充带箭头的div？需覆盖右侧箭头区域求解决方案

没问题，我来帮你搞定这个需求！你原来用伪元素border实现箭头的方式，只能让图片填充矩形主体部分，没法覆盖箭头区域对吧？咱们换个思路，把整个带箭头的形状做成一个完整的容器，让图片能填满整个区域。

方案1：使用clip-path直接定义容器形状 #

最简洁的方法是用clip-path绘制带箭头的整体形状，这样容器本身就包含箭头区域，图片作为背景就能直接填满整个形状：

<div class="arrow_box"></div>

.arrow_box {
  position: relative;
  width: 400px;
  height: 200px;
  /* 用polygon绘制带箭头的路径，参数和你原来的箭头尺寸匹配 */
  clip-path: polygon(0 0, calc(100% - 15px) 0, calc(100% - 15px) calc(50% - 15px), 100% 50%, calc(100% - 15px) calc(50% + 15px), calc(100% - 15px) 100%, 0 100%);
  /* 设置背景图片，cover确保填满整个裁剪后的形状 */
  background: url('你的图片地址') center/cover no-repeat;
}

关键说明：

• clip-path里的15px就是你原来箭头的边框宽度，需要和你原来的border-width保持一致，这样箭头大小才匹配。
• center/cover会让图片居中并拉伸填满整个形状，不会出现空白区域。

方案2：兼容旧浏览器的伪元素图片裁剪 #

如果需要兼容不支持clip-path的旧浏览器，可以用伪元素承载图片，再对伪元素进行裁剪：

<div class="arrow_box">
  <!-- 这里可以放置你的内容，比如文字 -->
</div>

.arrow_box {
  position: relative;
  width: 400px;
  height: 200px;
  /* 让容器能显示超出自身的伪元素 */
  overflow: visible;
  /* 确保内容在图片上方 */
  z-index: 1;
}

.arrow_box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* 宽度加上箭头的15px，覆盖整个区域 */
  width: calc(100% + 15px);
  height: 100%;
  background: url('你的图片地址') center/cover no-repeat;
  /* 和方案1一样的裁剪路径 */
  clip-path: polygon(0 0, calc(100% - 15px) 0, calc(100% - 15px) calc(50% - 15px), 100% 50%, calc(100% - 15px) calc(50% + 15px), calc(100% - 15px) 100%, 0 100%);
  /* 把图片放在容器内容下方 */
  z-index: -1;
}

这样不管是哪种方案，图片都会完美覆盖包括箭头在内的整个Div区域，你只需要把你的图片地址替换成实际的图片路径就行啦！

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