1、基于變形的方案

對容器進行變形，再對圖片進行反向變形。

<div id="a">
    ![](img.jpg)
</div>

#a{
    margin: 300px  auto;
    border: 1px dashed #333;
    width: 160px;
    overflow: hidden;
    transform:rotate(45deg);
}
#a>img{
    max-width: 100%;
    transform:rotate(-45deg);
}

上下左右會有空白，是因為圖片的寬度為100%，會等于容器的寬度，變為菱形后圖片的寬度應為容器對角線的長度。勾股定理求得約等于142%(向上取整，向下取整還是會出現空白，向上取整才會超出)。使用scale()進行放大。

#a>img{
    max-width: 100%;
    transform:rotate(-45deg) scale(1.42);
}

2、使用clip-path方案（此屬性瀏覽器支持程度不高）

clip-path允許我們制定一個剪裁路徑，將元素剪裁成我們需要的樣子，理論上可以剪裁成任何形狀。

img{
    clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}

clip-path屬性還支持漸變動畫

img{
    clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
    transition: .5s clip-path;
}
img:hover{
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
}