Description
CDN Search
75CDN jsDelivr
<!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>
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();
.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;
}