1、基于變形的方案

對容器進(jìn)行變形，再對圖片進(jìn)行反向變形。

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

上下左右會(huì)有空白，是因?yàn)閳D片的寬度為100%，會(huì)等于容器的寬度，變?yōu)榱庑魏髨D片的寬度應(yīng)為容器對角線的長度。勾股定理求得約等于142%(向上取整，向下取整還是會(huì)出現(xiàn)空白，向上取整才會(huì)超出)。使用scale()進(jìn)行放大。

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

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

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

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

clip-path屬性還支持漸變動(dòng)畫

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