<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>css3 做菱形</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/jquery-1.10.2.js"></script>
<style>
.demo{
width: 100px;
height: 100px;
background:#eef2f3;
margin: 50px;
overflow: hidden;
}
.padding-box{
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.a1{
width: 100px;
height: 100px;
overflow: hidden;
background:url(images/3.jpg) no-repeat;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="demo padding-box">
<div class="a1"></div>
</div>
</body>
</html>
原文：http://www.cnblogs.com/lily2015/p/4661920.html