7. 菱形图片

方法一

先旋转整体，再把图片反向旋转，放大

.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}

方法二

使用clip-path属性

clip-path: circle(40%);  /* 高度的40%为半径 */

clip-path: ellipse(20px 40px at 30% 10%);  /* 水平半径 垂直半径 水平位置 垂直位置 */

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);  /* 水平位置 垂直位置 */

制作动画

img {
  max-width: 200px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: 1s clip-path;
}
img:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}