Разделите несколько границ для имитации бумаги

Question

Я пытаюсь сделать div с декоративными границами.Этот div должен быть:

• отзывчивым
• реагировать на операцию изменения размера
• и регулировать его высоту и ширину в зависимости от внедренного изображения

Что я понял, так это пример скрипки, и окончательное решение должно выглядеть примерно так:

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

Может кто-нибудь мне помочь, расширить или перестроить это для других требований.

Answer 1

Я думаю, это то, что тебе нужно.

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

Различное решение с 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>

Answer 3

Вы можете попробовать несколько 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" />