Заправленные углы онлайн урок.




<div class="corners">
Content
</div>

body {
background: #e6e6e6;
}

.corners {
background: #f6f6f6;
height: 700px;
margin: 50px auto;
max-width: 600px;
position: relative;
width: 80%;
box-shadow: 0 1px 7px hsla(0, 0%, 0%, 0.2);
}

/* Corner Effect */
.corners:after,
.corners:before
{
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
top: -25px;
width: 100px;
box-shadow: 0 5px 10px -7px hsla(0, 0% ,0%, 0.5);
}
.corners:after {
left: -50px;
transform: rotate(-45deg);
}
.corners:before {
right: -50px;
transform: rotate(45deg);
}

См. Pen Tucked Corners Криса Койера ( @chriscoyier ) на CodePen .