I'm attempting to make a posted paper in pure CSS3 that has box-shadow and transitions. I've so far completed a paper with shadows on both sides, but I want to change the appearance to something like this:
Is that even possible without images?
.shadow {
width: 150px;
height: 150px;
background-color: yellow;
position: relative;
}
.shadow:after {
position: absolute;
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
}
<div class="shadow">
edit this even further
</div>