在網頁中呈現菱形效果有兩種方法
基于變形的方案
使用div將圖片包裹起來，然后對其應用相反的rotate（）變形樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>菱形圖片</title>
<style type="text/css" media="screen">
.photo{
margin: 5% auto;
width: 150px;
transform: rotate(45deg);
overflow: hidden;
}
.photo > img{
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}
</style>
</head>
<body>
<div class="photo">
</div>
</body>
</html>
max-width：100%這條聲明會被解析為容器的邊長，但是我們需要的是圖片寬度與容器對角線相等，所以約為1.42倍。如果使用scale()變樣式來把這個圖片放大會更合理：1）希望圖片尺寸屬性保留100%這個值，當瀏覽器不支持變形樣式時仍然可以得到合理的布局
2）通過scale()變形樣式來縮放圖片是以它的中心點進行縮放的；通過width屬性來放大圖片時，只會以它的左上角為原點進行縮放，從而迫使我們動用額外的負外邊距來把圖片的位置調整回來。
這是實現效果
裁剪路徑方案
使用clip-path屬性對圖片進行裁剪，使用polygon()多邊形函數來指定形狀（一系列用逗號分隔的坐標點），完美解決非正方形圖片的菱形裁剪問題，還可以做出一些動畫。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>菱形圖片</title>
<style type="text/css" media="screen">
img{
width: 30%;
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%);
}
</style>
</head>
<body>
</body>
</html>
長方形圖片的裁剪效果
鼠標移上去可以平滑過渡到原來的樣子
