Как создать перспективную тень с помощью CSS?

Question

Я знаю о свойстве box-shadow в CSS, но это создает тень, которая выглядит как проецируемая на стене прямо за элементом. Мне нужно, чтобы создать тень, которая выглядит как элемент стоит на земле, как это:

Это то, что я до сих пор:

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

You может достичь этого без использования свойства 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>