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>