如何用箭头制作图像填充 div？ [复制]答案

【问题标题】：How do I make an image fill div with an arrow? [duplicate]如何用箭头制作图像填充 div？ [复制]
【发布时间】：2018-09-24 14:16:00
【问题描述】：

我希望图像填充 div 中的整个空间，包括 div 右侧的箭头区域。我没有找到任何提示或样本来解决问题。你能帮我么？

.arrow_box {
  position: relative;
  background: #88b7d5;
  width: 400px;
  height: 200px;
}
.arrow_box:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-left-color: #88b7d5;
  border-width: 15px;
  margin-top: -15px;

  z-index: -30;
}

.user-image{
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-position: center center;
  position: relative;

  object-fit: cover;

  z-index: 10;
}

<div class="arrow_box">
 
<img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Amazona_aestiva_-upper_body-8a_%281%29.jpg" class="user-image" />
</div>

【问题讨论】：

不能把图片设置为div的背景吗？
@S.Monteleone 他不能因为箭把戏
我不能，我需要这个结构，因为动态数据库查询（隐藏输入不是解决方案）。

标签： html css css-position

【解决方案1】：

您可以使用clip-path: polygon()：

.arrow_box {
  position: relative;
  background: #88b7d5;
  width: 400px;
  height: 200px;
  -webkit-clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
  clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
}

.user-image {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-position: center center;
  position: relative;
  object-fit: cover;
  z-index: 10;
  -webkit-clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
  clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
}

<div class="arrow_box">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Amazona_aestiva_-upper_body-8a_%281%29.jpg" class="user-image" alt="">
</div>

【讨论】：