如何实现类drop-shadow的clipPath边框？现有方案有瑕疵求替代

我想要实现中间带弧形缺口的边框效果，尝试用drop-shadow属性模拟，但效果不佳。有没有无需使用clipPath的实现方案？

当前实现代码 #

CSS

.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;
    width: 50%;
} 
.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)
    }
}

HTML

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

替代方案：纯CSS伪元素+渐变实现 #

无需依赖clipPath，我们可以用伪元素结合CSS渐变来构建带弧形缺口的边框，同时保留图片的完整显示：

修改后的CSS

.hero {
    position: relative;
    overflow: hidden;
    height: 300px !important;
    width: 500px;
}
.hero-side {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%; /* 左右两侧各占一半宽度 */
    overflow: hidden;
}
.hero-side img { 
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-left {
    left: 0;
    z-index: 1;
} 
.hero-right {
    right: 0;
    z-index: 2;
    border-bottom: 5px solid #ebcf52; /* 右下角边框 */
}

/* 左侧带弧形缺口的边框 */
.hero-right::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    /* 用渐变组合出顶部边框、底部边框和中间弧形缺口 */
    background: 
        linear-gradient(#ebcf52, #ebcf52) 0 0/100% calc(50% - 10px),
        linear-gradient(#ebcf52, #ebcf52) 0 calc(50% + 10px)/100% calc(50% - 10px),
        radial-gradient(circle at left center, transparent 10px, #ebcf52 10px);
    background-repeat: no-repeat;
}

修改后的HTML

<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="">
    </div> 
</section>

方案说明 #

• 移除了SVG clipPath和drop-shadow滤镜，改用纯CSS实现边框效果
• 右侧容器的底部直接用border-bottom实现右下角边框
• 左侧的带缺口边框通过伪元素+渐变组合实现：
  • 上下两段线性渐变实现直边框
  • 中间的径向渐变实现弧形缺口，缺口处自动透出下方的左侧图片
• 左右两侧容器各占50%宽度，图片用object-fit: cover保证比例填充

内容的提问来源于stack exchange，提问作者Jose Adrian