html 下の両角がめくれたようなエフェクトの箱阴影

Posted 2021-05-11

.box {
  position: relative;
  width: 250px;
  height: 150px;
  border: 1px solid #efefef;
  margin: 30px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), inset 0 0 40px rgba(0, 0, 0, 0.06); 
}

.box:before,
.box:after {
  content: '';
  z-index: -1;
  position: absolute;
  bottom: 10px;
  width: 70%;
  max-width: 300px; 
  height: 55%;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.box:before {
  left: 10px;
  transform: skew(-15deg) rotate(-6deg);
}
.box:after {
  right: 10px;
  transform: skew(15deg) rotate(6deg);
}

<div class="box"></div>