使用CSS在HTML元素的一个角的左侧和下方形成统一的阴影

附加单个视觉阴影

使用与此HTML片段类似的代码#1

<div class="shadowBottom"  style="width: 200px;" >
   ... stuff here ...
</div>

渲染如下：

事实上，这不是我想要实现的，因为两个阴影效果之间有一个差距

问题

我很乐意看到如何填充gab并在拐角处生成均匀的阴影。大概是这样的：

代码#1

---

编辑：最接近这一点的方法是使用

skew

制作菱形图形：

.shadowBottom{
  position:relative;
  box-shadow: 0 0 6px rgba( 0, 0, 0, 0.2);    
}

.shadowBottom::before, .shadowBottom::after{ 
  content: '';
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: -1;
  width: 50%;
  height: 90%;
  box-shadow: 0px 10px 30px rgba( 0, 0, 0, 0.4);   
  transform: skewX(-10deg) rotate(-4deg); 
               /* ^ skew value should be adjusted to match box w/h */
}

.shadowBottom::after{
  transform: skewX(10deg) rotate(4deg);  
               /* ^ same here */
  left: auto;
  right: 10px;
}

.shadowBottom {

    background-color: #FFFFFF;  
    width: 100%;
    position: relative;

}

@shadowRotation: 6deg;
@horizontalOffset: 0px;
@alpha: 0.2;

.shadowBottom:before {

    content: '';

    position: absolute;
    bottom: 10px;
    left: @horizontalOffset;
    z-index: -1;
    width: 100px;
    height: 20px;

    -webkit-box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );
    -moz-box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );
    box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );

    -webkit-transform: rotate( -@shadowRotation );
    -moz-transform: rotate( -@shadowRotation );
    -o-transform: rotate( -@shadowRotation );
    -ms-transform: rotate( -@shadowRotation );
    transform: rotate( -@shadowRotation );

}

.shadowBottom:after {

    content: '';

    position: absolute;
    bottom: 10px;
    right: @horizontalOffset;
    z-index: -1;
    width: 100px;
    height: 20px;

    -webkit-box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );
    -moz-box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );
    box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );

    -webkit-transform: rotate( @shadowRotation );
    -moz-transform: rotate( @shadowRotation );
    -o-transform: rotate( @shadowRotation );
    -ms-transform: rotate( @shadowRotation );
    transform: rotate( @shadowRotation );

}

.shadowBottom{
  position:relative;
  box-shadow: 0 0 6px rgba( 0, 0, 0, 0.2);    
}

.shadowBottom::before, .shadowBottom::after{ 
  content: '';
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: -1;
  width: 50%;
  height: 90%;
  box-shadow: 0px 10px 30px rgba( 0, 0, 0, 0.4);   
  transform: skewX(-10deg) rotate(-4deg); 
               /* ^ skew value should be adjusted to match box w/h */
}

.shadowBottom::after{
  transform: skewX(10deg) rotate(4deg);  
               /* ^ same here */
  left: auto;
  right: 10px;
}