Заправленные углы - CSS-хитрости

Anonim
 Content 
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); )

См. Статью Криса Койера (@chriscoyier) на CodePen.