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%);

}

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页