Comment donner une ombre oblique à cette image?

Question

S'il vous plaît jeter un oeil à la photo.

enter image description here

J'ai essayé ci-dessous le code. Mais ce n'est même pas proche.

z-index: -1; 
content: ""; 
box-shadow: 86px 0 17px rgba(0,0,0,0.33); 
-webkit-transform: skew(-36deg); 
-moz-transform: skew(-36deg); 
-ms-transform: skew(-36deg); 
-o-transform: skew(-36deg); 
transform: skew(-36deg); 
-webkit-transform-origin: 0% 100%; 
-moz-transform-origin: 0% 100%; 
-ms-transform-origin: 0% 100%; 
-o-transform-origin: 0% 100%; 
transform-origin: 0% 100%; 

Jetez un oeil à la deuxième image s'il vous plaît

enter image description here

J'apprécierais vraiment si quelqu'un pouvait me aider.

Merci

Answer 1

Utilisez un pseudo element et faites-le pivoter donnent un effet d'ombre. Vérifiez cet extrait.

img { 
 
    max-width: 100%; 
 
    border-radius: 120px; 
 
} 
 
.image-wrapper { 
 
    position: relative; 
 
    width: 250px; 
 
    transform: rotate(20deg); 
 
    transform-origin: 0% 100%; 
 
} 
 
.image-wrapper:before{ 
 
    z-index: -1; 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, 0.1); 
 
    border-radius: 120px; 
 
    transform: rotate(25deg); 
 
    transform-origin: 70% 70%; 
 
}

<div class="image-wrapper"> 
 
    <img src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/cat.jpg" alt=""> 
 
    </div>