Html Question posted in
Some basic documentation can be found here.

Html – drop-shadow like border for clipPath

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

2

Answers


  1. 0

    Unfortunately you can’t accurately replicate a stroke with drop-shadow.

    To some extent you can sometimes improve the result by stacking more shadows on top of each other.

    If you need a proper stroke rendering you may rebuild your header section in <svg> completely.

    This way we can easily duplicate the clip-path as a visible stroke element via <use> element.

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

    In the example above I’ve recalculated the path commands to match a width of 300 units. (You can do this with svg-path-editor or any vector graphic app like inkscape, Illustrator etc). So we don’t need the clipPathUnits="objectBoundingBox" trick to make our clip path responsive

    Login or Signup to reply.
  2. 0

    I don’t think you can replicate a stroke with drop-shadow accurately.

    I tried to add another svg element, with a shape with a stroke that looks like the shape in the clip-path, but some of the numbers are a bit hard to adjust.

    .hero {
    position: relative;
    overflow: hidden;
    height: 300px !important;
  width: 500px;
}
.hero-side {
    position: absolute;
    top: 0;
    height: 100%;
}
.hero-side img { 
    height: 100%;
}
.hero-side svg, .hero-side img{ display: block} 
.hero-left {
    left: 0;
    z-index: 1;
    background-color: #f0f; 
} 
.hero-right {
    right: -5%;
    z-index: 2;  
    overflow: hidden;
} 
#extra-stroke{
position:absolute; left:-3px; top:0; width: 300px; height: 600px;
stroke:red; stroke-width:0.02;z-index:1;fill:green;  
}

.hero-right img {
    left: 10px;  
    clip-path: url(#separator);
}
#extra-stroke,
#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 id='extra-stroke' viewBox="-0.02 0 1 2">
 <g > 
                     <g fill='none' stroke='rgba(235, 207, 82, 1)'> <path d="M0 -1L0,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 v1" />  </g>
 </svg>

        <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search