如何仅使用CSS创建透视阴影？

Question

我知道CSS中的box-shadow属性，但这会产生一个阴影，看起来像投影在元素后面的墙上。我需要创建一个看起来像元素站在地面上的阴影：

这是我到目前为止所做的：

div {
  display: inline-block;
  height: 150px;
  width: 150px;
  background: url(//placehold.it/150x150);
  margin-left: 20px;
  box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.75);
}

<div></div>
<div></div>

Answer 1

您可以在不使用元素本身的box-shadow属性，但在伪元素::before上实现此目的。

• transform: skewX(60deg);会让光源看起来像是来自
• height: 10%;会让它看起来像投影在地上
• width: 70%并且某些定位会隐藏实际元素
• 最后box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75);会产生影子

当然，对于较旧的浏览器，您应该使用供应商前缀。

div {
  position: relative;
  display: inline-block;
  height: 150px;
  width: 150px;
  background: url(//placehold.it/150x150);
  margin-left: 30px;
}
div::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 15px;
  height: 10%;
  width: 70%;
  box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75);
  transform: skewX(60deg);
}

<div></div>
<div></div>