この画像に斜め影を付けるにはどうしたらいいですか？

Question

画像をご覧ください。

enter image description here

Iはコードの下にしようとしました。しかしこれは近いものではありません。

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%; 

次の写真を見てほしい

enter image description here

誰かが私を助けることができれば、私は本当にいただければ幸いです。

おかげ

Answer 1

はpseudo elementを使用して、影の効果を与える回転させます。このスニペットを確認してください。

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>