像 ClipPath 的边框一样的阴影

Question

我正在尝试完成中间的边界，但我不知道如何去做。

尝试使用投影，但并不完美。是否有 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)
    }
}

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

Answer 1

不幸的是，您无法使用投影准确地复制笔划。

在某种程度上，您可以有时通过堆叠更多阴影来改善结果。

如果您需要正确的笔画渲染，您可以完全重建

<svg>

中的标题部分。

这样我们就可以通过

<use>

元素轻松地将剪辑路径复制为可见的笔划元素。

#separator {
  stroke: rgba(235, 207, 82, 1);
  stroke-width: 4px;
  transform: translateY(-200px);
  animation: 0.5s 1s moveDown forwards;
}

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

<svg viewBox="0 0 500 300">
  <defs>
    <clipPath id="clip">
      <!-- clip-path: scaled to 300 inits width -->
      <path id="separator" 
            d="m 500 -2 
               l -300 0 
               l 0 148.5 
               l 0 3 
               a 3 2.4 -44 1 0 30.9 0 
               a 3 2.4 90 1 1 30.9 0 
               l 0 548.5 
               l 238.2 0" />
    </clipPath>
  </defs>

  <image href="https://picsum.photos/id/237/400/300" />
  
  <!-- clipped image -->
  <image x="33%" clip-path="url(#clip)" href="https://picsum.photos/id/236/400/300" />

  <!-- visible stroke -->
  <use class="stroke" href="#separator" fill="none" />

</svg>

在上面的示例中，我重新计算了路径命令以匹配 300 个单位的宽度。 （您可以使用 svg-path-editor 或任何矢量图形应用程序（如 inkscape、Illustrator 等）来完成此操作。所以我们不需要

clipPathUnits="objectBoundingBox"

技巧来让我们的剪辑路径响应