Achieve object projection effect with box-shadow - css

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/

Answer 2

As mentioned in my comment, I would generally recommend the approach used in my fiddle (which is, use another pseudo-element) or the one in Martin's answer (which is, to use an extra element) but as you've mentioned that the other pseudo-element is already used and you are trying to avoid any extra elements, the other approach is to use gradients as background for the parent element. By using the appropriate side-to-side gradients with background-position, background-size, we can not only get the shape but also an effect very similar to the blurred nature of the shadow.
Below is a sample snippet: (the output is also reasonably responsive as you can see by hovering it)
#test {
position: relative;
height: 100px;
width: 100px;
margin: 100px;
background: linear-gradient(to bottom right, transparent 45%, gray 55%), linear-gradient(to bottom left, transparent 45%, gray 55%), linear-gradient(to bottom, transparent, gray), linear-gradient(gray, gray);
background-repeat: no-repeat;
background-size: 30px 95%, 30px 95%, calc(100% - 60px) 8px, calc(100% - 60px) calc(100% - 8px);
background-position: 0% 100%, 100% 100%, 50% 4px, 50% 100%;
}
#test::after {
position: absolute;
content: "";
background-color: maroon;
width: 100%;
height: 45%;
left: 0px;
top: 100%;
transform: perspective(150px) rotateX(-45deg);
transform-origin: center top 0;
}
/* just for demo */
#test {
transition: all 1s;
}
#test:hover {
height: 200px;
width: 200px;
}
<div id="test"></div>
In the below snippet, I have given a different color for each of the gradient just to visually show how it is achieved.
#test {
position: relative;
height: 100px;
width: 100px;
margin: 100px;
background: linear-gradient(to bottom right, transparent 45%, red 55%), linear-gradient(to bottom left, transparent 45%, blue 55%), linear-gradient(to bottom, transparent, green), linear-gradient(rebeccapurple, rebeccapurple);
background-repeat: no-repeat;
background-size: 30px 95%, 30px 95%, calc(100% - 60px) 8px, calc(100% - 60px) calc(100% - 8px);
background-position: 0% 100%, 100% 100%, 50% 4px, 50% 100%;
}
#test::after {
position: absolute;
content: "";
background-color: maroon;
width: 100%;
height: 45%;
left: 0px;
top: 100%;
transform: perspective(150px) rotateX(-45deg);
transform-origin: center top 0;
}
/* just for demo */
#test {
transition: all 1s;
}
#test:hover {
height: 200px;
width: 200px;
}
<div id="test"></div>

Answer 3

According to the W3 spec, "the 'box-shadow' property attaches one or more drop-shadows to the box". The shadow you want to create is not a drop shadow so there is no CSS that would make the shadow in the picture.
The closest you could achieve is pushing the shadow off one edge by using a negative spread radius:
body {
padding-top: 50px;
}
#test {
margin: 0 auto;
background-color: maroon;
box-shadow: 0 -20px 7px -6px black;
height: 45px;
width: 60px;
transform: perspective(150px) rotateX(-45deg);
transform-origin: center bottom 0;
}
<div id="test"></div>