如果你能承受到图像稍微旋转……(4度)
.rightDiagonal{
display:inline-block;
overflow:hidden;
padding-right:35px;
}
.rightDiagonal img{
-webkit-backface-visibility: hidden;
transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-ms-transform: rotate(4deg);
margin:-15px;
box-shadow: 16px 0 25px -20px rgba(0,0,0, 1);
}
除此以外…
如果没有,那么你需要一个复杂的附加层(< div>),其中最外层的div是包装器,内部div具有阴影并且与内部图像相比,如果使用0还原为0 -4deg
.rightDiagonal{
display:inline-block;
overflow:hidden;
padding-right:15px;
}
.rightDiagonal div {
display:inline-block;
overflow:hidden;
margin: -15px 0 -15px -15px;
-webkit-backface-visibility: hidden;
transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-ms-transform: rotate(4deg);
box-shadow: 16px 0 25px -20px rgba(0,0,0, 1);
}
.rightDiagonal img{
margin-right: -15px;
transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
}
![16a357296cf85a9a7f75ae1334e6423a.png](https://i-blog.csdnimg.cn/blog_migrate/ff0e4177ae053d10cd6571075a4d0b95.png)
![0b37d250234be6877454a24b624310d3.png](https://i-blog.csdnimg.cn/blog_migrate/0ddeec4e15732bf653b40720f55e1db0.png)