CSS3实现菱形的两种方法

第一种：(这种方法需要额外的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%);

}