第一种:(这种方法需要额外的html标签。代码不够简洁,直观,如果图片是非正方形,会出bug)
<div class="prismaticPic"><img src="xunLeiFenShares.png" alt=""></div>
css:
.prismaticPic{
width:100px;
margin: 20px 30px;
transform:rotate(45deg);
overflow: hidden;
}
.prismaticPic > img{
max-width: 100%;
transform: rotate(-45deg) scale(1.52);
}
第二种:(利用clip-path属性来实现棱形)
<img class="imgClip" src="//pic1.iqiyipic.com/common/20180824/xunLeiFenShares.png" alt="">
css:
.imgClip{
margin: 20px 30px;
clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
transition:1s clip-path;
}
.imgClip:hover{
clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}