18_Matrix.html

<div class="item">
	<div class="a">
	<div class="b" id="b1">
	<div class="a" id="a2">
	<div class="b" id="b2">

	<div class="b" id="b3">
	<div class="a" id="a3">
	<div class="b" id="b4">
	<div class="a" id="a4">

	<div class="a" id="a5">
	<div class="b" id="b5">
	<div class="a" id="a6">
	<div class="b" id="b6">
</div>
<style>
	.item {
		position: fixed;
		top: 0;
		left: 0;
		width: 400;
		height: 300;
		background: #5c434c
	}
	.a {
		margin: 0;
		position: fixed;
		top: 10;
		left: 10;
		width: 160;
		height: 160;
		border-radius: 50%;
		background: #f09462
	}
	.a:before,
	.b:before {
		content: '';
		position: absolute;
		top: 80;
		left: 0;
		width: 80;
		height: 80;
		background: #5c434c;
		box-shadow: 80px 0 0 0 #5c434c, 0 80px 0 0 #5c434c,
			80px -80px 0 0 #5c434c
	}
	.b {
		margin: 0;
		position: fixed;
		top: 10;
		left: 10;
		width: 160;
		height: 160;
		border-radius: 50%;
		background: #f5d6b4
	}
	#b1 {
		left: 110
	}
	#b2 {
		left: 310
	}
	#b3 {
		top: 110;
		left: 10;
		z-index: 1
	}
	#b4 {
		top: 110;
		left: 210;
		z-index: 2
	}
	#b5 {
		top: 210;
		left: 110;
		z-index: 3
	}
	#b6 {
		top: 210;
		left: 310;
		z-index: 3
	}

	#a2 {
		left: 210
	}
	#a3 {
		top: 110;
		left: 110;
		z-index: 2
	}
	#a4 {
		top: 110;
		left: 310;
		z-index: 2
	}
	#a5 {
		top: 210;
		left: 10;
		z-index: 2
	}
	#a6 {
		top: 210;
		left: 210;
		z-index: 3
	}