Тоже долго мучался, но пришел к одному решению...
Создаем доп DIV
.arrow-bot-green {
width: 0;
height: 0;
background: transparent;
border-left: solid 10px #fff;
border-right: solid 10px #fff;
border-top: solid 10px transparent;
border-bottom: solid 10px #fff;
position: relative;
top: -10px;
left: 20px;
}
.arrow-bot-green::before {
width: 20px;
height: 10px;
content: '';
top: -10px;
right: 10px;
background-color: #fff;
position: absolute;
}
.arrow-bot-green::after {
width: 490px; // Делаем максимальный чтобы на всё фото. А в самом диве к фото ставим overflow-x
height: 10px;
content: '';
top: -10px;
left: 10px;
background-color: #fff;
position: absolute;
}
Но, потом нашел замечательный сервис, который наглядно показывает результат
через clip-path: polygon
bennettfeely.com/clippy