<div id="demo">

<div class="post-it">
  <div class="inner">
    A post-it note with some shadows
  </div>
</div>
  
</div>
#demo { width:400px; margin:0 auto; }

.post-it {
  font-size: 20px;
  position: absolute;
  width:300px;
  margin:20px;
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  transform: rotate(1deg);
}

  .post-it:before,
  .post-it:after {
    content:" ";
    position: absolute;
    z-index: 100;
  }

  .post-it:before {
    background: rgba(0,0,0,0.3);
    bottom:2px;
    left:4px;
    max-height: 60px;
    max-width: 180px;
    height:70%;
    width:90%;

    -webkit-box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
    -ms-box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
    -o-box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
    box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);

    -webkit-transform: skew(-8deg, -2deg) rotate(-1deg) translate3d(0,0,0);
    -moz-transform: skew(-8deg, -2deg) rotate(-1deg) translate3d(0,0,0);
    -ms-transform: skew(-8deg, -2deg) rotate(-1deg) translate3d(0,0,0);
    -o-transform: skew(-8deg, -2deg) rotate(-1deg) translate3d(0,0,0);
    transform: skew(-8deg, -2deg) rotate(-1deg) translate3d(0,0,0);
  }

  .post-it:after {
    background: rgba(0,0,0,0.1);
    height:30%;
    max-height: 30px;
    max-width: 60px;
    right:1px;
    top:0px;
    width:30%;

    -webkit-box-shadow: 0 0 7px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 7px 1px rgba(0,0,0,0.2);
    -ms-box-shadow: 0 0 7px 1px rgba(0,0,0,0.2);
    -o-box-shadow: 0 0 7px 1px rgba(0,0,0,0.2);
    box-shadow: 0 0 7px 1px rgba(0,0,0,0.2);

    -webkit-transform: skew(-10deg, -5deg) rotate(-1deg) translate3d(0,0,0);
    -moz-transform: skew(-10deg, -5deg) rotate(-1deg) translate3d(0,0,0);
    -ms-transform: skew(-10deg, -5deg) rotate(-1deg) translate3d(0,0,0);
    -o-transform: skew(-10deg, -5deg) rotate(-1deg) translate3d(0,0,0);
    transform: skew(-10deg, -5deg) rotate(-1deg) translate3d(0,0,0);

  }

  .post-it .inner {
    padding:10px;
    min-height:100px;
    background: #fff799;
    z-index: 1000;
    position: relative;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.