1、基于變形的方案
對容器進行變形妖碉，再對圖片進行反向變形涌庭。
<div id="a">
</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%欧宜，會等于容器的寬度坐榆，變?yōu)榱庑魏髨D片的寬度應(yīng)為容器對角線的長度。勾股定理求得約等于142%(向上取整冗茸，向下取整還是會出現(xiàn)空白席镀，向上取整才會超出)。使用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%);
}
