<div class="corners">
</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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.