<div class="paper">CSS curled corner</div>

body {
  background: brown;
}
.paper {
  background: #fffffe;
  border-radius: 0 0 100px 0/50px 100px 12px 20px;
  height: 100px;
  left: 50%;
  margin: -50px 0 0 -127px;
  position: absolute;
  text-align: center;
  font: normal 14px georgia;
  line-height: 100px;
  color: #333;
  top: 50%;
  width: 255px;
}

/*shadow under paper*/
.paper::before {
  content: '';
  display: block;
  position: absolute;
  width: 90%;
  height: 20px;
  box-shadow: 3px 17px 6px rgba(0,0,0,.3);
  bottom: 15px;
  right: 5px;
  z-index: -1;
  transform: skew(-10deg,2deg);
}

 /*curl*/
.paper::after {
  animation: curl 1s;
  content: '';
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  box-shadow: -2px -1px 2px rgba(0,0,0,.3), -3px 3px 5px rgba(0,0,0,.3);
  right: 20px;
  bottom: 0px;
  transform: skew(-75deg,30deg) rotate(-10deg);
}

@keyframes curl {
  from {
    box-shadow: -2px -1px 2px rgba(0,0,0,0), -3px 3px 5px rgba(0,0,0,0);
    transform: skew(-90deg,0deg) rotate(0deg);
  } to {
    box-shadow: -2px -1px 2px rgba(0,0,0,.3), -3px 3px 5px rgba(0,0,0,.3);
    transform: skew(-75deg,30deg) rotate(-10deg);
  }
}