Single element tucked corners

by Jens Grochtdreis

HTML

<div class="tucked-corners"></div>

CSS

body {
    background-color: #f6f6f6;
    padding: 6em;
}
.tucked-corners {
    background-image: url('http://distilleryimage1.s3.amazonaws.com/4cd92c4afa4e11e19e6f22000a1e8b8a_7.jpg');
    background-size: cover;
    box-shadow: inset 0 0 0 .1em hsla(0,0%,0%,.1),
                0 .1em .25em hsla(0,0%,0%,.25);
    margin: 0 auto;
    padding-bottom: 100%;
    position: relative;
}
.tucked-corners:after,
.tucked-corners:before {
    box-shadow: inset 0 1em .25em -1em hsla(0,0%,0%,.5),
                inset 0 -1em .25em -1em hsla(0,0%,0%,.5),
                0 3em 0 -.1em #f6f6f6,
                0 -3em 0 -.1em #f6f6f6;
    content: '';
    height: 130%;
    left: 50%;
    margin: -15% -10%;
    position: absolute;
    top: 0%;
    width: 20%;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
.tucked-corners:before {
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

JavaScript

// Only works on 1:1 image ratios with solid background colours.