Div multiple borders for paper simulation - css

Question

I am trying to make a div with decoration borders. This div should be:
responsive
react to an resize operation
and adjust it's height and width depending on the embeded image
What I have figured out yet is this fiddle example and the final solution should be looks like exactly in this way:
.stack {
margin-top: 50px;
}
.c1 {
position: absolute;
z-index: 10;
border: 1px solid black;
width: 300px;
height: 300px;
background: red;
}
.c1 img {
width: 300px;
}
.c2 {
position: absolute;
z-index: 5;
background: bluex;
border-top: 1px solid black;
border-right: 1px solid black;
margin-top: -5px;
margin-left: 6px;
width: 300px;
height: 300px;
}
.c3 {
position: absolute;
z-index: 1;
background: yellowx;
border-top: 1px solid black;
border-right: 1px solid black;
margin-top: -10px;
margin-left: 11px;
width: 300px;
height: 300px;
}
<div class="stack">
<div class="c1">
<img src="https://dummyimage.com/300.png/09f/fff" />
</div>
<div class="c2"></div>
<div class="c3"></div>
</div>
Can anyone help me, to extend or rebuild this for the other requirements.

Answer 1

You can try multiple box-shadow
img {
border: 2px solid;
margin: 20px;
box-shadow:
6px -6px 0 #fff,
8px -8px 0 #000,
12px -12px 0 #fff,
14px -14px 0 #000;
}
<img src="https://dummyimage.com/300.png/09f/fff" />

Answer 2

I think this is what u need.
<div class="stack">
<div class="c1">
</div>
<div class="c2-a"></div>
<div class="c2-b"></div>
<div class="c3-a"></div>
</div>
.stack {
margin-top:50px;
position:relative;
}
.c1 {
z-index: 10;
border: 1px solid red;
width:95%;
background:red;
background-image:url('https://dummyimage.com/300.png/09f/fff');
background-repeat:no-repeat;
background-size:100% auto;
padding-top:70%; /*adjust the padding value */
}
.c2-a {
position:absolute;
z-index: 5;
background:bluex;
border-top: 1px solid black;
top:-7px;
right:3%;
width:90%;
}
.c2-b {
position:absolute;
z-index: 5;
background:bluex;
border-top: 1px solid black;
top:-15px;
right:0;
width:80%;
}
.c3-a {
position:absolute;
z-index: 1;
background:yellowx;
border-right: 1px solid black;
right:0;
top:-15px;
padding-top:70%;
}
.c3-b {
/* create the onther line lol */
}
http://jsfiddle.net/kqjwv48r/4/

Answer 3

Different solution with jquery:
$(document).ready(function(){
var width = $(".c1").width();
$(".c2").css({'width':(width +'px'), 'height':(width +'px')});
$(".c3").css({'width':(width +'px'), 'height':(width +'px')});
});
.stack {
margin-top: 50px;
}
.c1 {
position: absolute;
z-index: 10;
display: inline-block;
}
.c1 img {
box-sizing: border-box;
border: 1px solid black;
}
.c2 {
position: absolute;
z-index: 5;
background: bluex;
border-top: 1px solid black;
border-right: 1px solid black;
margin-top: -8px;
margin-left: 8px;
}
.c3 {
position: absolute;
z-index: 1;
background: yellowx;
border-top: 1px solid black;
border-right: 1px solid black;
margin-top: -15px;
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stack">
<div class="c1">
<img src="https://dummyimage.com/200.png/09f/fff" />
</div>
<div class="c3"></div>
<div class="c2"></div>
</div>