Question

我只是网络编程的新手。

这就是我的意思：

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:

＆LT; div id =＆＃34; header＆＃34;＆gt; ＆LT; div id =＆＃34; left-image＆＃34;＆gt; ＆LT; div id =＆＃34; middle-image＆＃34;＆gt; ＆LT; div id =＆＃34; right-image＆＃34;＆gt; ＆LT; / DIV＆GT;

Answer 1

你可以通过变换旋转实现这一点：

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/

Answer 2

使用 css3的transform:rotate(degree)属性根据您使用的浏览器，分别对IE和Chrome / Safari使用-ms-transform:rotate(degree)或-webkit-transform:rotate(degree)

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

2 个答案: