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

html-css037

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

思路: div旋转45度 img旋转-45度

html:<div class="lx"><img src="img/replace_me.jpg" alt=""></div>

css:

.lx{transform:rotate(45deg)width:400pxheight:400pxoverflow:hiddenvertical-align: middletext-align: centermargin:100px autodisplay:flex}

.lx img{transform:rotate(-45deg)max-width:100%max-height:100%}

用margin可以。因为margin可以设为负值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<style>

.img-div { background:#ccc width:200px}

.img-div img.margin-t{ margin-top:-30px}

.img-div img.margin-l{ margin-left:32px}

</style>

</head>

<body>

<div class="img-div">

<img src="img.png" /><img src="img.png" /><img src="img.png" />

<img src="img.png" class="margin-t margin-l" /><img src="img.png" class="margin-t"/>

<img src="img.png"  class="margin-t"/><img src="img.png" class="margin-t" /><img src="img.png" class="margin-t"/>

<img src="img.png"  class="margin-t margin-l"/><img src="img.png" class="margin-t" />

<img src="img.png"  class="margin-t"/><img src="img.png" class="margin-t" /><img src="img.png" class="margin-t"/>

</div>

</body>

</html>

附件就是例子，你可以直接看效果。