CSS: Tucked Corners

tucked-corners.css

/* http://www.red-team-design.com/css3-tucked-corners */
.tucked-corners-top {
    position: relative;
    width: 500px; min-height: 200px;
    margin: 100px auto; padding: 20px;
    background-color: #fff; /* Fallback */
    background:	linear-gradient(45deg,  transparent 10px, #fff 10px),
		linear-gradient(135deg, transparent 10px, #fff 10px),
		linear-gradient(225deg, transparent 10px, #fff 10px),
		linear-gradient(315deg, transparent 10px, #fff 10px);
    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);			
}

[class*='tucked-corners-']::before, /* All the four corners */
[class*='tucked-corners-']::after {
	content: '';
	position: absolute;
	height: 20px; width: 80px;
	box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
        box-shadow: none\9; /* Do not show on IE9 #needed */
}

.tucked-corners-top::before, /* Top left & top right */
.tucked-corners-top::after {
	top: -10px;
}

.tucked-corners-bottom::before, /* Bottom left & bottom right */
.tucked-corners-bottom::after {
	bottom: -10px;
}		

.tucked-corners-top::before, /* Top left & bottom left */
.tucked-corners-bottom::before {
	left: -42px;
}

.tucked-corners-top::after, /* Top right & bottom right */
.tucked-corners-bottom::after {
	right: -42px;
}

.tucked-corners-top::before { /* Top left */
	transform: rotate(-45deg);
}

.tucked-corners-top::after { /* Top right */
	transform: rotate(45deg);			
}

.tucked-corners-bottom::before { /* Bottom left */
	transform: rotate(-135deg);
}

.tucked-corners-bottom::after { /* Bottom right */
	transform: rotate(135deg);
}

tucked-corners.html

<div class="tucked-corners-top">
	<div class="tucked-corners-bottom">
		<!--  content here -->
	</div>
</div>