Cain Nuke Cain Nuke - 6 months ago 36
CSS Question

Achieve object projection effect with box-shadow

Hi,

I am trying to achieve this effect in css:

enter image description here

This is my code:

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


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

Thank you.

https://jsfiddle.net/zcyy09mp/1/

Answer

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/

enter image description here