Home/ Questions/Q 8409875
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T00:02:14+00:00

I am not a CSS developer so please bear with me.. This is what

  • 0

I am not a CSS developer so please bear with me..
This is what am trying to achieve.. enter image description here

As of now i am able to create this much..

enter image description here

I am now confused how to create the wall (C). Please help me.

Code as of now for the 2d pic is as follows.

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can skew the X and Y independently, which is probably what you want to do. The following works for me in Chrome.

    Note that skew is not well-supported by slightly older browsers (e.g. IE8) and that the results you’ll get for lining things up to the pixel may vary slightly across browsers anyway.

    I think that everything that supports skew properly also supports SVG, and that would be a much better way of doing this (the co-ordinates would be much more obvious).

    SVG simplicity:

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

    Skew craziness:

    <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>​
    • 0