创建一个边角阴影的box

如何创建如下的div左下角和右下角为阴影的样式？

仅使用 div 的 before 和 after 就可以搞定。

首先，我创建了一个div元素：

   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       body {
           background-color: #eee;
       }
       div {
           width: 500px;
           height: 200px;
           background-color: #fff;
           margin: 100px auto;
           font-size: 30px;
           box-sizing: border-box;
           padding: 20px;
           position: relative;
       }
   </style>


   <div>
       Hello, I'm Daotin.
   </div>

然后我为这个div 添加 :before和:after 伪元素，每个宽度均为为 50％ （为了便于看清，我设置了不同的颜色）

div:before,
div:after {
   content:'';
   display: block;
   width: 50%;
   height: 200px;
   position: absolute;
   top: 0;
}
div:before {
   left: 0;
   background-color: #aaa;
   transform: skewY(-3deg);
}
div:after {
   right: 0;
   background-color: #ccc;
   transform: skewY(3deg);
} 

然后将两个伪元素在Y轴上稍微进行翻转得到如下样式：

div:before {
   left: 0;
   background-color: #aaa;
   transform: skewY(-3deg);
}
div:after {
   right: 0;
   background-color: #ccc;
   transform: skewY(3deg);
} 

接下来，我将添加z-index: -1到伪元素以将其移到其父元素的后面。

完成后，我将执行以下操作：

• 添加 filter: blur

• 添加了从透明到黑色的渐变（以隐藏其父级顶部中心的伪元素边缘）

最终的代码

div:before,
div:after {
   content:'';
   display: block;
   width: 50%;
   height: 200px;
   position: absolute;
   top: 0;
   z-index: -1;
   filter: blur(3px);
   background: linear-gradient(to bottom, transparent, #989898);
}
div:before {
   left: 0;
   transform: skewY(-3deg);
}
div:after {
   right: 0;
   transform: skewY(3deg);
}