Achieve object projection effect with box-shadow

Question

I am trying to achieve this effect in CSS:

This is my code:

#test {position: relative;margin: 100px;}
#test::after {
  background-color: maroon;
  box-shadow: 0 -50px 10px 7px gray;
  height: 45px;
  left: -15px;
  position: absolute;
  top: 40px;
  transform: perspective(150px) rotateX(-45deg);
  transform-origin: center bottom 0;
  width: 60px;
  content: "";
}

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

but I am not achieving the expected result with the cast shadow. I wonder if its even possible to do this with CSS only?

Fiddle Demo

Answer 1

Maybe something like this? I added another element representing the shadow:

#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;
}

https://jsfiddle.net/zcyy09mp/4/