如果你能承受到图像稍微旋转……(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);

}