菱形图片

效果

在一个菱形中放入一张图片

基于变形的方案

把图片用一个 div 包裹起来，然后对其应用相反的 rotate 变形样式

<div class="box">
    <img src="avatar.jpg" alt="avatar">
</div>

.box {
    transform: rotate(45deg);
    overflow: hidden;
}
.box img {
    max-width: 100%;
    transform: rotate(-45deg);
}

如上问题，max-width: 100%，100% 会被解析成容器的宽，但我门想让图片的宽度与容器的对角线相等，所以为了放大图片，可以采用 scale(1.42)

.box img {
    max-width: 100%;
    transform: rotate(-45deg) skew(1.42);
}

裁剪路径方案

方案用到 clip-path，但此属性未完全支持

<img src="avatar.jpg" alt="avatar">

img {
    /* polygon：多边形裁剪 */
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

甚至可以支持动画

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