I am trying to accomplish this border in the middle but I don’t know how to go about it.
Tried using drop-shadow but it’s not perfect. Could there be an alternative to clipPath that would allow me to do this?
.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)
}
}
<section id="hero" class="hero">
<div class="hero-side hero-left">
<img src="https://i.ibb.co/9rgCrm2/hero-left.jpg" alt="">
</div>
<div class="hero-side hero-right">
<img src="https://i.ibb.co/zQ6ZSWW/hero-right.jpg" alt="">
<svg viewBox="0 0 1000 1000" width="0" height="0">
<defs>
<clipPath id="separator" clipPathUnits="objectBoundingBox" >
<path d="m1,0 l-1,0 l0,0.495 l0,0.01 a0.008,0.01,46,1,0,0.103,0 a-0.008,0.01,0,1,1,0.103,0 l0,0.495 l0.794,0" />
<path d="m1.206,1 l-1,0 l0,1 l1,0"></path>
</clipPath>
</defs>
</svg>
</div>
</section>