Paper Stack with pseudo elements

dabblet.css

/**
 * Paper Stack with pseudo elements
 */

*, *:before, *:after {
	-webkit-box-sizing: border-box;
}

.paper {
	width: 280px;
	height: 300px;
	box-shadow: 0 0 8px #9e9e9e;
	margin: 190px auto 0;
	background: white;
	position: relative;
	padding: 40px;
}

.paper:after {
	content: "";
	display: block;
	position: absolute;
	top: -5px;
	left: 0;
	z-index: -1;
	width: inherit;
	height: inherit;
	box-shadow: inherit;
	background: white;
	transform: rotateZ(12deg);
}

.paper:before {
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: 0;
	z-index: -1;
	width: inherit;
	height: inherit;
	box-shadow: inherit;
	background: white;
	transform: rotateZ(-8deg);
}

/* cosmetic stuff */

.paper p {
	font-family: Georgia, serif;
	font-style: italic;
	text-align: center;
	font-size: 2em;
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
}

dabblet.html

<div class="paper">
	<p>This is a single div</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}