Simulate page break with box-shadows

Question

I am trying to create a page separation with CSS but I faced an issue with the box-shadow property.

I have a container whitch looks like a black page, and I want to separate it into two pages with a same lookas the end and start of page. Here is an image of what I have (note the gap between the side and bottom shadows):

_{(source: noelshack.com)}

and here is an image of the desired output:

_{(source: noelshack.com)}
.

Requirements:

1. I need to get exactly the same on the separation corner.
2. I can't use two containers because I drag & drop items in this one, I can only use one container.
3. The container height is dynamic.

fiddle

HTML:

<div class="container">
    <div class="calPrin" id="barrePage1">
        <div class="calHaut"></div>
        <div class="calBas"></div></div>
    </div>
</div>

CSS:

body{
    background-color:rgb(186,186,186);
}

.container{
    border: solid 1px black;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 1px 1px 1px;
    width: 782px;
    background-color: #FFFFFF;   
    height:500px;
 
}

.calHaut{
    width: 782px;
    background-color: rgb(255, 255, 255);
    border-bottom: solid 1px black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    box-shadow: 0.5px 1px 1px;
    position: absolute;    
}

.calBas{
    position: relative;
    top: 4px;
    background-color: rgb(255, 255, 255);
    height: 2px;
    width: 782px;
    border-top: solid black 1px;
    border-right: solid 1px black;
    border-left: 1px solid black;
}

.calPrin{
    top:50px;
    background-color: rgb(186,186,186);
    height: 6px;
    position: absolute;
    width: 786px;
    left:8px;
}

Answer 1

If you want to simulate a page break inside your container with box shadows, you can do this :

DEMO

output:

*****EDIT*****

For your use case, you can remove one div and with a bit of tweaking fo the shadows, you can get this :

DEMO

---

Code for the first demo :

HTML:

<div class="container">
    <div class="calPrin"></div>
    <div class="shdw-right"></div>
</div>

CSS:

body {
    background-color:rgb(186, 186, 186);
}
.container {
    border: solid 1px black;
    margin-left: auto;
    margin-right: auto;
    width: 782px;
    background-color: #FFFFFF;
    height:500px;
    position:relative;
    margin-bottom:100px;
    box-shadow: 10px 10px 5px #656565;
}
.calPrin {
    position:relative;
    left:-1px;
    width:784px;
    height:50px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color:rgb(186, 186, 186);
    z-index:1;
    box-shadow: inset 0px 15px 5px -5px #656565;
}
.calPrin:before, .calPrin:after {
    content:'';
    position:absolute;
    background:#BABABA;
    z-index:2;
    width:10px;
}
.calPrin:before {
    height:100%;
    right:100%;
    border-right:3px solid #BABABA;
    box-shadow: 10px 0px 5px 0px #BABABA;
}
.calPrin:after {
    left:100%;
    top:20px;
    bottom:0;
    width:15px;
    box-shadow: 0px 10px 5px 0px #BABABA;
}
.shdw-right {
    position:relative;
    left:100%;
    width:30px;
    top:-31px;
    margin-left:-15px;
    height:20px;
    background:#BABABA;
    box-shadow: 0px -10px 5px 0px #BABABA;
}