如何为这张图片添加偏斜阴影？

Question

请看一下图片。

enter image description here

我试过下面的代码。但这甚至不是很接近。

    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>