Css 使用长方体阴影实现对象投影效果

我试图在CSS中实现这种效果：

这是我的代码：

#测试{位置：相对；边距：100px；}
#测试：：之后{
背景颜色：栗色；
盒影：0-50px 10px 7px灰色；
高度：45px；
左：-15px；
位置：绝对位置；
顶部：40px；
变换：透视（150px）旋转（-45度）；
变换原点：中心-底部0；
宽度：60px；
内容：“；
}

根据“长方体阴影”属性将一个或多个阴影放置到长方体上”。您想要创建的阴影不是一个阴影，因此没有CSS可以在图片中创建阴影

可以达到的最接近效果是使用以下方法将阴影从一条边上推离：

正文{
填充顶部：50px；
}
#试验{
保证金：0自动；
背景颜色：栗色；
盒影：0-20px 7px-6px黑色；
高度：45px；
宽度：60px；
变换：透视（150px）旋转（-45度）；
变换原点：中心-底部0；
}

---

也许是这样的？我添加了另一个表示阴影的元素：

#shadow {
  height: 90px;
  left: -15px;
  position: absolute;
  top: 30px;
  background: rgba(0, 0, 0, 0);
  width: 60px;
  transform: perspective(50px) rotateX(25deg);
  box-shadow: 0 -106px 20px 17px #808080;
}

如中所述，我通常会推荐中使用的方法（即使用另一个伪元素）或Martin回答中使用的方法（即使用一个额外的元素），但正如您所提到的，另一个伪元素已经被使用，您正试图避免任何额外的元素，另一种方法是使用渐变作为父元素的背景。通过使用具有

背景位置

、

背景大小

的适当的侧对侧渐变，我们不仅可以获得形状，还可以获得与阴影模糊性质非常相似的效果

下面是一个示例片段：（悬停可以看到，输出响应合理）

#测试{
位置：相对位置；
高度：100px；
宽度：100px；
利润率：100像素；
背景：线性渐变（至右下角，透明45%，灰色55%）、线性渐变（至左下角，透明45%，灰色55%）、线性渐变（至下角，透明，灰色）、线性渐变（灰色，灰色）；
背景重复：无重复；
背景尺寸：30px 95%，30px 95%，钙（100%-60px）8px，钙（100%-60px）钙（100%-8px）；
背景位置：0%100%、100%100%、50%4px、50%100%；
}
#测试：：之后{
位置：绝对位置；
内容：“；
背景颜色：栗色；
宽度：100%；
身高：45%；
左：0px；
最高：100%；
变换：透视（150px）旋转（-45度）；
变换原点：中心顶部0；
}
/*只是为了演示*/
#试验{
过渡：所有1；
}
#测试：悬停{
高度：200px；
宽度：200px；
}

---

你能做一个JSFIDLE吗？你可以像这样实现多个伪元素。不要认为光有阴影就可以做到这一点。你可以添加一个模糊过滤器（目前仅限于webkit），使灰色区域看起来更像阴影。不过，我只是读到它不能在这种情况下使用。是的，它可以。非常好的解决方案，谢谢。没问题，谢谢。没有办法只垂直翻转阴影来实现效果或其他什么？@CainNuke没有，但也许你可以用SVG实现效果。谢谢你的努力，但这需要更改html。我认为使用伪元素将是一种更好的方法，但是我已经用完了：：before和：：after。实际上，您可以删除这两个div，如果您愿意，只使用

before

和

after

，我的意思是我已经用完了：：before，以获得我的问题中没有显示的不同效果。否则我会使用你的解决方案，因为这正是我想要的效果。如果只可能有一个除了：：before和：：after之外的附加伪元素。