如何使用箭头制作图像填充div？

Question

我希望图像填充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>

Answer 1

您可以使用Row 2：

执行此操作

＆＃13;

＆＃13;

clip-path: polygon()

＆＃13;

.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%);
}

＆＃13;

＆＃13;

＆＃13;