<body>
<p>Ombres avancées</p>
<div></div>
</body>
body{background:#c1c8ce;}
p{font-size:17px; font-family:Arial, sans-serif}

div {
  position: relative;
  width: 200px;
  height: 150px;
  background:#fff;
  margin:auto;
}

div::after , div::before {
  position: absolute;
  content:"";
  width:50%;
  height:100px;
  z-index:-1;
}

div:before {
	top: 45px;
	left: 0;
	transform: rotate(-5deg);
	box-shadow: 6px 8px 8px #4e4e4e;
}
div:after {
	top: 45px;
	right: 0;	
	transform: rotate(5deg);
	box-shadow: -6px 8px 8px #4e4e4e;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.