3.菱形图片

 .picture{
    width: 400px;
    border: 1px solid red;
 transform: rotate(45deg);
 overflow: hidden;
 margin: 100px auto;
 }
  .picture img{
      max-width: 100%;
      transform: rotate(-45deg) scale(1.45);
  }

最终版本 利用clip-path属性实现

img {
 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%);
}