3

我不是 CSS 开发人员，所以请多多包涵。这就是我想要实现的目标。在此处输入图像描述

到目前为止，我能够创造这么多..

在此处输入图像描述

我现在很困惑如何创建墙（C）。请帮我。

截至目前，二维图片的代码如下。

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#floor {
-webkit-transform: skew(148deg); 
-moz-transform: skew(148deg); 
-o-transform: skew(148deg); 
   background: none repeat scroll 0 0 #000066;
    float: left;
    height: 54px;
    left: 100px;
    position: fixed;
    top: 108px;
    width: 100px;
}
#frontwall {
    width: 100px; 
    height: 100px; 
    background: #0099FF;
    position: fixed;
    left: 117px;
}
#otherwall {
    width: 150px; 
    height: 100px; 
    -webkit-transform: rotate(-20deg) ; 
    -moz-transform: rotate(-20deg) ; 
    -o-transform: rotate(-20deg) ; 
    background: #0000CC;
    float: left;

}
</style>
</head>
<body>
<div id="otherwall"></div>
<div id="frontwall"></div>
<div id="floor"></div>

</body></html>
4

1 回答 1

3

您可以独立地倾斜 X 和 Y，这可能是您想要做的。以下适用于我的 Chrome。

请注意，稍微较旧的浏览器（例如 IE8）不能很好地支持倾斜，并且您将得到的对齐像素的结果可能会因浏览器而略有不同。

我认为正确支持倾斜的所有东西也支持 SVG，这将是一种更好的方法（坐标会更加明显）。

SVG 简单性：

<html>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="150px" height="125px">
        <polygon points="50,0 50,100 150,100 150,0" style="fill: #0099FF"/>
        <polygon points="0,25 50,0 50,100 0,125" style="fill: #0000CC"/>
        <polygon points="0,125 100,125 150,100 50,100" style="fill: #000066"/>
    </svg>
</body>
</html>

歪斜疯狂：

<style type="text/css">
#floor {
    -webkit-transform: skewx(-45deg);
    -moz-transform: skewx(-45deg);
    -o-transform: skewx(-45deg);
    transform: skewx(-45deg);
    background: #000066;
    height: 50px;
    left: 35px;
    position: fixed;
    top: 108px;
    width: 100px;
}
#frontwall {
    width: 100px; 
    height: 100px; 
    background: #0099FF;
    position: fixed;
    top: 8px;
    left: 60px;
}
#otherwall {
    left: 10px;
    width: 50px;
    height: 100px;
    top: 33px;
    position: fixed;
    -webkit-transform: skewy(-45deg);
    -moz-transform: skewy(-45deg);
    -o-transform: skewy(-45deg);
    transform: skewy(-45deg);
    background: #0000CC;
}
</style>
</head>
<body>
<div id="otherwall"></div>
<div id="frontwall"></div>
<div id="floor"></div>
</body></html>​
于 2012-08-19T18:23:16.137 回答