Question

用css3 怎么制作菱形图片，图片是正的不旋转，新手求大神指点，最好把代码写出来，

原图

做成这种





Answer 1

思路: div旋转45度 img旋转-45度
html:<div class="lx"><img src="img/replace_me.jpg" alt=""></div>
css:
.lx{transform:rotate(45deg);width:400px;height:400px;overflow:hidden;vertical-align: middle;text-align: center;margin:100px auto;display:flex}
.lx img{transform:rotate(-45deg);max-width:100%;max-height:100%;}

追问

不行啊

Answer 2

先弄一个div菱形，在菱形div加入style:"overflow: hidden;"，然后在菱形里面放图片就行了

Answer 3

你好，
在img设置 img{-webkit-transform：rotate(45deg)；transform：rotate(45deg)；-ms-transform：rotate(45deg)；-moz-transform：rotate(45deg)；}
已经兼容浏览器了的；
希望可以帮到您！

追问

图片不旋转的

Answer 4

img{
    transform:rotate(45deg);
}