How do I make an image fill div with an arrow? [duplicate] - html

Question

This question already has answers here:
How can I create Triangle shape clip mask using CSS
(4 answers)
Transparent arrow/triangle indented over an image
(4 answers)
Closed 4 years ago.
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>

Answer 1

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>