Тень, подобная границе для clipPath ⇐ CSS

[Anonymous]

Я пытаюсь создать эту границу посередине, но не знаю, как это сделать.
[img]https://i .ibb.co/56m78Hg/image.png[/img]

Пытался использовать тень, но это не идеально. Может ли быть альтернатива clipPath, которая позволила бы мне это сделать?

Код: Выделить всё

.hero {
position: relative;
overflow: hidden;
height: 300px !important;
width: 500px;
}
.hero-side {
position: absolute;
top: 0;
height: 100%;
}
.hero-side img {
height: 100%;
}
.hero-left {
left: 0;
z-index: 1;
background-color: #f0f;
}
.hero-right {
right: -10%;
z-index: 2;

filter:
drop-shadow(-5px 0px 0px rgba(235, 207, 82, 1))
drop-shadow(5px 5px 0px rgba(235, 207, 82, 1))
;

}
.hero-right img {
left: 10px;
clip-path: url(#separator);
}
#separator {
transform: translateY(-200px);
animation: 1s moveDown forwards;
}

@keyframes moveDown {
from {
transform: translateY(-200px);
}
to {
transform: translateY(0px)
}
}

Код: Выделить всё

[img]https://i.ibb.co/9rgCrm2/hero-left.jpg[/img]

[img]https://i.ibb.co/zQ6ZSWW/hero-right.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/783 ... r-clippath