8.（高级）CSS形状之：菱形图片

一、正方形菱形

 

方法：

HTML

<div id="picture">
    <img src="figures/chapter-3/3.18.jpg">
</div>

CSS

#picture{
    width: 400px;
    transform: rotate(45deg);
    overflow: hidden;
    height: 400px;
}
#picture img{
    max-width: 100%;
    transform: rotate(-45deg);

    transform: rotate(-45deg) scale(1.42);

}

  

声明：以上方法参考《CSS揭秘》