我該如何給這張圖片添加歪斜的陰影？

我嘗試下面的代碼。但這並不甚密切。

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

我真的很感激，如果有人可以幫助我在那裏。

感謝

來源

2017-10-17 Fahmida Khan

請記住，StackOverflow的是不是一個編碼服務，你必須向我們展示你已經嘗試自己 –

好吧，我更新我的帖子 –

使用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>

來源

2017-10-17 07:24:31

我該如何給這張圖片添加歪斜的陰影？

回答

相關問題