box-shadow 阴影右下脚折边效果

效果展示：

代码片段：

 <style type="text/css">
.boxshadow {
  width: 300px;
  min-height: 300px;
  margin: 30px;
  display: inline-block;
  background: #fff;
  border: 1px solid #ccc;
  position:relative;
  text-align:center;
}
 
.boxshadow1{
  padding: 0 0 1px 0;
  background: #f3f3f3;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
  background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-radius: 0 0 60px 0 / 0 0 60px 0;
  box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);  
}
.boxshadow1:before{
  content:'';    
  width: 25px;
  height: 20px;
  position: absolute;
  bottom:0;
  right:0;
  border-radius: 0 0 30px 0;
  box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  -moz-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  -o-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
  transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
}
/*这里，我们做出的褶皱阴影*/
.boxshadow1:after{
  content: '';
  z-index: -1;
  width: 100px;
  height: 100px;
  position:absolute;
  bottom:0;
  right:0;
  background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  box-shadow: 20px 20px 8px rgba()0,0,0,0.2;
  -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
  -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);    
  transform: rotate(0deg) translate(-45px,-20px) skew(20deg);       
}
</style>

<div class="boxshadow boxshadow1">
<p>阴影右下脚折边效果</p>
</div>