Editing 叠堆视觉

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta charset="utf-8" />
  <title>叠堆视觉</title>
</head>

<body>
  <div class="wbox">
    <div class="w1">
    </div>
    <div class="w2">
    </div>
    <div class="w3">
    </div>
    <div class="w4">
    </div>
    <div class="w5">
    </div>
  </div>
</body>

</html>

.wbox {
    margin: auto;
    width: 500px;
    height: 500px;
    position: relative;
}

.wbox div {
    width: 41.66666666%;
    height: 41.66666666%;
    position: absolute;
    z-index: 9;
    border-radius: 2px;
    box-shadow: 1px #ddd;
    border: 1px solid transparent;
}

.wbox .w1{
    left: 29.1666666%;
    background-color: #84011b;    
}

.wbox .w2{
    top: 29.1666666%;
    z-index: 8;
    background-color: #3f47cd;
}

.wbox .w3{
    left: 29.1666666%;
    top: 58.3333333%;
    z-index: 7;
    background-color: #00a4e7;
}

.wbox .w4{
    top: 29.1666666%;
    left: 58.3333333%;
    z-index: 6;
    background-color: #ff7e26;
}

/* 填补 */
.wbox .w5{
    top: 29.1666666%;
    left: 58.3333333%;
    z-index: 10;
    width: 12.5%;
    height: 12.5%;
    border-radius: 0;
    background-color: #ff7e26;
}

var pg = {
    init: function () {
        pg.autoSize();
        window.onresize = pg.autoSize;
    },
    autoSize: function () {
        var minw = .9 * Math.min(document.documentElement.clientWidth, document.documentElement.clientHeight);
        var wbox = document.querySelector('.wbox');
        wbox.style.width = minw + "px";
        wbox.style.height = minw + "px";
    }
}
pg.init();