div.diamond-pic{width:200px;transform: rotate(45deg);overflow: hidden;margin:60px auto;} img.diamond-img{max-width:100%;transform: rotate(-45deg);} img.diamon-pic-clip-path{clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);} img.diamon-pic-clip-path-2{clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);transition: 1s clip-path;} img.diamon-pic-clip-path-2:hover{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);} 在网页设计中,我们常常能够看到被裁切成菱形的图片。 传统的实现方式是预先