<div class="folded_corner">
  <p>Bacon ipsum dolor amet pork chop shankle shoulder drumstick pastrami meatball jowl pork ball tip bresaola.</p>
</div>
@import url(https://fonts.googleapis.com/css?family=Rosario:400,700); 

body{
  background: grey;
}

.folded_corner{
  position:relative;
  width:210px;
  margin:4vh auto;
  padding:40px;
  color:#fff;
  font: 20px'Rosario', sans-serif;
  background: #58a;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
    linear-gradient(-135deg, transparent 1.5em, #58a 0);
  
  -webkit-filter: drop-shadow(20px 30px rgba(0,0,0,0.1));
  filter: drop-shadow(20px 30px rgba(0,0,0,0.1));
}
.folded_corner::before{
  content: ' ';
  position:absolute;
  top:2em; 
  right:0;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,0.1) 0) 100% 0 no-repeat;
  width: 2em;
  height:2em;
  transform: rotate(180deg)
}

/* inspired by:
  CSS secret 19: play.csssecrets.io/folded-corner 
  &
  CSS secret 16: play.sccsecrets.io/drop-shadow  
  
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.