trapezoid dropshadow

by lukerichison

HTML

<div>
</div>

CSS

html, body {
    background-color: #F7F6F7;
    margin: 0; padding: 0; border: 0;
}
div {
    width: 80%;
    height: 24em;
    margin: 0 auto;
    background-color: #FFF;
    position: relative;
    -webkit-perspective: 100px;
    -webkit-transform-style: preserve-3d;
    perspective: 100px;
    transform-style: preserve-3d;
}
div:after {
    position: absolute;
    content: "";
    height: 20em;
    width: 100%;
    bottom: 0;    
    z-index: -1;
    box-shadow: 0 0 4em -0.5em #777;
    -webkit-transform: rotateX( 1deg);
    -webkit-transform-origin: bottom;
    transform: rotateX( 1deg);
    transform-origin: bottom;
}