Создание изогнутых теней элементов HTML

Демонстрация работы изогнутых теней элементов HTML, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<article>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

CSS

article {
	width: 200px;
	margin: 2em auto;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 2em;
	background: #ffc;
	position: relative;
}
article:before {
	content: url('http://thenewcode.com/assets/images/shadow.png');
	position: absolute; z-index: -2;
	bottom: -15px; left: 8px;
}
article:before, article:after {
	content: url('http://thenewcode.com/assets/images/shadow.png');
	position: absolute;
	z-index: -2; bottom: -15px;
}
article:left { left: 3%;  }
article:after {
	transform: scaleX(-1);
	right: 3%;
}