Shadow box on adjacent elements with variable width

Question

I am trying to add a window shadow to two elements, each with a variable width. My desired result is as follows:

I am trying to get this result with a pseudo-element that covers overlapping shadow shadows, but since they should have transparency, I cannot find a solution in which there are no small overlaps at the edges of the boxes or the pseudo-element is adjusted to the correct width. The top box also does not have to have a top border to solve my problem.

Fiddle

HTML:

<div>
    <p></p>
</div>
<div>
    <p></p>
</div>

SCSS:

div {
    display: inline-block;
    margin: 75px;
    width: 200px;
    height: 50px;
    position: relative;
    p {
        position: absolute;
        top: 100%;
        left: 0;
        height: 300px;
        width: 250px;
    }
    &, p {
        background: #ededed;
    }
}
div:last-child p {
    width: 150px
}

div {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
    p {
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
    }    
}

---

Edit:

JS , , , script . script , , dom , "" "" . , , . , , , .

JS , .

:

(JS),

, ( JS)

, , :

, , . , .

- , , css, .

Answer 1

, , .

: ,

div {
    display: inline-block;
    margin: 75px;
    width: 150px;
    height: 50px;
    position: relative; 
    -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 0,0,0.7));
    filter: drop-shadow(0px 0px 2px red);
}

div p {
    position: absolute;
    top: 100%;
    left: 0;
    height: 300px;
    width: 250px; 
    margin: 0px;
}

div, div p {
    background: #ededed; 
}

#second p {
  width: 100px; 
}

<div>
    <p></p>
</div>
<div id="second">
    <p></p>
</div>

Hide result

, , :

div {
    display: inline-block;
    margin: 75px;
    width: 150px;
    height: 50px;
    position: relative; 
}

div p {
    position: absolute;
    top: 100%;
    left: 0;
    height: 300px;
    width: 250px; 
    margin: 0px;
}

div, div p {
    background: #ededed; 
}

#second p {
  width: 100px; 
}

div:after, p:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    box-shadow: 0px 0px 2px 6px rgba(0,255,0,0.7);
    z-index: -10;
}

<div>
    <p></p>
</div>
<div id="second">
    <p></p>
</div>

Hide result

- . , , , . webkit

div {
    display: inline-block;
    margin: 75px;
    width: 300px;
    height: 50px;
    position: absolute; 
}

div p {
    position: absolute;
    top: 100%;
    left: 0;
    height: 100px;
    width: 200px; 
    margin: 0px;
}

div, div p {
    background: #ededed; 
}


div:after, p:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    box-shadow: 0px 0px 15px 15px rgba(255,0,0,0.2);
    z-index: -10;
}

p:after {
    -webkit-clip-path: polygon(0% 30px, 230px 30px, 260px 60px, 100% 100%, 0% 100%);
}

div:after {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 260px 100%, 230px 80px, 0% 80px);
    
}

<div>
    <p></p>
</div>

Hide result

Answer 2

, : div .

<div class="shad">
    <div class="cover1"></div>
    <p></p>
</div>

<div class="shad">
    <div class="cover2"></div>
    <p></p>    
</div>

, div.shad.

div.shad {
    display: inline-block;
    margin: 75px;
    width: 250px;
    height: 350px;
    position: relative;
    background: #ededed;
    p {
        position: absolute;
        top: 0%;
        left: 0;
        width: 250px;
        height: 350px;
    }
    .cover1 {
    position: relative;
    float: right;
    margin-top: -2px;
    margin-right: -2px;
    width: 50px;
    height: 50px;
    background-color: white;
    border-left: 2px solid rgba(0, 0, 0, 0.2);
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);    
    }
    .cover2 {
    position: relative;
    float: right;
    margin-top: 50px;
    margin-right: -2px;
    width: 50px;
    height: 300px;
    background-color: white;
    border-top: 2px solid rgba(0, 0, 0, 0.2);
    border-left: 2px solid rgba(0, 0, 0, 0.2);
    }
}

div.shad {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);     
}