html菱形开头做无序,css3 做菱形

css3 做菱形

.demo{

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{

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);

}