<div class="page foldtl">
<img src="https://unsplash.it/400" alt="" />
</div>
<!-- Followed this guide - https://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/ -->
/* page styles */
body {
background: white;
}
.page {
background: #fefefe;
width: 330px;
margin: 50px;
}
.page h2 {
padding: 85px 0 0 20px;
font: 400 35px/1.5 'Lilita One', Helvetica, sans-serif;
}
.page p {
padding: 10px 20px;
font: 12px/1.5 Helvetica, sans-serif;
color: #4b4b4b;
}
.foldtl {
img {
vertical-align: bottom;
max-width: 100%;
}
position: relative;
&:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-bottom: 50px solid #ddd;
border-right: 50px solid #888;
-webkit-box-shadow: -7px 7px 7px rgba(0,0,0,0.5);
-moz-box-shadow: -7px 7px 7px rgba(0,0,0,0.5);
box-shadow: -7px 7px 7px rgba(0,0,0,0.5);
}
-webkit-box-shadow: -5px 5px 5px rgba(0,0,0,0.8);
-moz-box-shadow: -5px 5px 5px rgba(0,0,0,0.8);
box-shadow: -5px 5px 5px rgba(0,0,0,0.8);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.