在网页设计中，使用CSS将方形图片裁剪成菱形是一种常见视觉需求。通过transform旋转容器并结合overflow属性，可以用纯CSS实现图片菱形裁剪，不需要借助图形软件或额外脚本。
实现原理
核心思路是准备一个外层容器和一个内层图片元素。将外层容器旋转45度，使其变成菱形轮廓，并设置overflow:hidden裁掉超出部分；同时把内部图片反向旋转45度，保证图像内容端正显示。这样从视觉上看，图片就被裁成了菱形。
基础HTML结构
<div class="diamond"> <img src="https://picsum.photos/200/200?random=2" alt="示例图片" /> </div>
对应CSS样式
.diamond {
width: 200px;
height: 200px;
overflow: hidden;
transform: rotate(45deg);
margin: 50px;
}
.diamond img {
width: 100%;
height: 100%;
transform: rotate(-45deg) scale(1.42);
display: block;
}
为什么图片要放大
容器旋转45度后，其内接正方形边长约为原边长的70.7%。如果图片不放大，旋转回正时会露出空白边角。通常将图片放大到原尺寸的1.42倍左右，即可覆盖菱形区域的四个角。
尺寸换算参考
下表列出常见容器边长与建议图片放大倍数的关系：
| 容器边长(px) | 放大后图片边长(px) | scale值 |
|---|---|---|
| 200 | 284 | 1.42 |
| 300 | 426 | 1.42 |
注意事项
- 容器外边距要留足，避免旋转后与其他元素重叠。
- 如果图片比例不是正方形，需先保证图片封面填充，可用object-fit:cover。
- 在IE旧版本中transform支持有限，必要时应做兼容处理。
小结
使用transform旋转容器技巧实现CSS图片菱形裁剪，写法直观、易于维护。掌握外层旋转与内层反向旋转加放大的组合，就能应对大多数菱形展示场景。