.wrapper { width: 100%; height: 100vh; background-color: silver; } .first { width: 100%; height: 50%; background-color: #282b3a; } .second { width: 100%; height: 100%; background-color: #eeeeee; } .block { top: -40px; position: relative; width: 200px; height: 200px; background-color: #fff; margin: 0 auto; box-shadow: 3px 8px 15px #b3afaf, -3px 8px 15px #b3afaf; } 
 <div class="wrapper"> <div class="first"> </div> <div class="second"> <div class="block"> </div> </div> </div>

It is necessary to remove the shadow at the top of the sidelines, where the block comes to another. Whatever the overlap of the upper block was, there was no shadow, but below it. For clarity, the screen, above the red lines, the shadow should be removed, leaving everything below.

example as necessary

    1 answer 1

    You can use the color of the dark block as the color of the shadow (with the addition of transparency), and you can poizololyatsya with pseudo-elements and position:absolute .

     .wrapper { width: 100%; height: 100vh; background-color: silver; } .first { width: 100%; height: 50%; background-color: #282b3a; } .second { width: 100%; height: 100%; background-color: #eeeeee; text-align:center; word-spacing:30px; } .block { display:inline-block; top: -40px; position: relative; width: 200px; height: 200px; background-color: #fff; margin: 0 auto; } .way1{ box-shadow: 3px 8px 15px rgba(40,43,58,.2), -3px 8px 15px rgba(40,43,58,.2); } .way2__content{ height:100%; position:relative; background:inherit; } .way2:before{ content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; box-shadow:3px 8px 15px green; clip:rect(40px,100vw,100vw,-10px); /*обрезка по низу и бокам для отображения тени сделана заведомо больше размера элемента*/ } 
     <div class="wrapper"> <div class="first"> </div> <div class="second"> <div class="block way1"></div> <div class="block way2"> </div> </div> </div>

    • Brilliant!) And the main thing is simple. This solved the problem, but I was interested in such a moment - is it possible to implement this somehow by applying additional styles, formatting, maybe some kind of pseudo-elements like before and after or functions transition? - Artem
    • Added option with pseudo - element - zhurof