如何使用html和css设置歪斜图像

-2

这就是我的意思是：

http://s12.postimg.org/tc25a1zsd/test.jpg

你能帮我关闭这个案子？

你可以下载的形象在这里https://drive.google.com/file/d/0B2lri_YI_98jalA3Vkc3TEdNZDQ/edit?usp=sharing

这里的一部分是我的尝试：

CSS：

body 

{ 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-color: #000000; 
background-color: #FFFFFF; 
} 

#header 
{ 
width: 1000px; 
height: 365px; 
margin-right: auto; 
margin-left: auto; 
background-image: url('images/BerlinBack.png'); 
} 

#left-image 
{ 
float: left; 
background: #999999; 
} 

#middle-image 
{ 
float: left; 
margin-left: 200px; 
} 

#right-image 
{ 
float: left; 
margin-left: 400px; 
}

HTML:

< DIV ID = “头” > < DIV ID = “左图像”> < DIV ID = “中间图像”> < DIV ID = “右图像”> </DIV>

来源

2014-04-10 Schreiner

您是否尝试过自己做这些？ –

这不是一个工作板。 – Nick

我尝试了很多方式，但从来没有成功:( – Schreiner

你可以做到这一点与变换旋转：

li { 
    list-style: none; 
    width: 50px; 
    height: 100px; 
    float: left; 
    margin-right: 25px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

li:first-child { 
    background: red; 
} 

li:nth-child(2) { 
    background: yellow; 
} 

li:last-child { 
    background: green; 
} 

ul { 
    height: 60px; 
    overflow: hidden; 
}

检查以下小提琴：

http://jsfiddle.net/fQfd5/2/

来源

2014-04-10 18:32:52

谢谢你们:)这是很棒的解决方案。 – Schreiner