How do I make an image fill div with an arrow?

Question

I want the image to fill the whole space in the div, including the area of the arrow on the div's right side. I didn't find any tip or sample to solve the problem. Can you please help me?

.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>

I can't, and I'm going to need this structure, because of dynamic database query (hidden inputs are not solution). — Cyberstaker, Apr 14 '18 at 10:12

score 3 · Accepted Answer · answered Apr 14 '18 at 10:08

You can do it with the 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>

How do I make an image fill div with an arrow?

1 Answers1