<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);
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
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.