折叠角

<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);
}

查看 CodePen 上 Chris Coyier (@chriscoyier) 的作品 折叠角。