左侧和右侧倾斜的盒子阴影

Question

我想在div的两边做一个倾斜的盒子阴影，我在这里添加了一个图像。 红色部分表示阴影。实际上颜色不是实心的，当它从边界移到外面时它会逐渐减少。

Answer 1

试试这个：

div{
  width: 200px;
  height: 200px;
  border:1px solid black;
  background: white;
}
div:before{
  content:' ';
  display:block;
  width: 200px;
  height:200px;
  background: linear-gradient(transparent, black);
  position: fixed;
  transform:   matrix3d(1.1,0,0.00,0,0.00,0.71,0.71,0.0007,0,-0.71,0.71,0,0,37,0,1);  z-index: -1;
}

<div>Hello</div>

Answer 2

这是我的贡献，希望它能为您提供基线。

＆＃13;

＆＃13;

  .box {
    width: 150px;
    height: 200px;
    position: relative;
    padding-left: 25px;
    padding-right: 25px;
  }
  .box-content {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background-color: white;
    border: 2px solid black;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .box::before {
    content: '';
    display: block;
    border-top: 0;
    border-bottom: 180px solid transparent;
    border-right: 25px solid red;
    position: absolute; 
    left: 0;
    bottom: 0;
  }

  .box::after {
    content: '';
    display: block;
    border-top: 0;
    border-bottom: 180px solid transparent;
    border-left: 25px solid red;
    position: absolute; 
    right: -4px;
    bottom: 0;
  }

＆＃13;

<div class="box">
   <div class="box-content">
      Box
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用transform: skew()应用于div的before和after

jsFiddle 1

<强>码

#test {
  width: 150px;
  height: 220px;
  line-height: 220px;
  background-color: white;
  border: 2px black solid;
  text-align: center;
  position: relative;
  margin: 10px 150px;
}
#test:before, #test:after {
  width: 150px;
  height: 200px;
  position: absolute;
  bottom: 0;
  left: -11px;
  z-index: -1;
  content: " ";
  display: block;
  background-color: red;
  transform: skew(5deg, 0);
}
#test:after {
  transform: skew(-5deg, 0);
  left: 11px;
}

<div id="test">Box</div>

编辑：为阴影效果提供渐变和透明度的真实模糊，我们可以使用linear-gradient背景和两个rgba()值，以及CSS { {3}} ^（1） 过滤器。

blur()

<强>码

#test {
  width: 150px;
  height: 220px;
  line-height: 220px;
  background-color: white;
  border: 2px black solid;
  text-align: center;
  position: relative;
  margin: 10px 150px;
}
#test:before, #test:after {
  width: 150px;
  height: 200px;
  position: absolute;
  bottom: 0;
  left: -11px;
  z-index: -1;
  content: " ";
  display: block;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
  transform: skew(5deg, 0);
  filter: blur(2px);
}
#test:after {
  transform: skew(-5deg, 0);
  left: 11px;
}

<div id="test">Box</div>

备注：

^（1） jsFiddle 2