CSS3实现菱形的两种方法

第一种:(这种方法需要额外的html标签。代码不够简洁,直观,如果图片是非正方形,会出bug)

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属性来实现棱形)

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

}

你可能感兴趣的:(CSS)