制作自定义形状的div CSS HTML

Question

I am trying to make a div with the following shape but with no success .Here is what i have done Fiddle

Here is the code so far.

.skew {
    display: inline-block;
    background-color:black;    
    height: 120px;
    width: 360px;
    margin-top: 100px;
    -webkit-transform: skewY(-11deg);
    -moz-transform: skewY(-11deg);
    -ms-transform: skewY(-11deg);
    -o-transform: skewY(-11deg);
    transform: skewY(-11deg);
    overflow:hidden;
}

Any solution is welcomed

Answer 1

A basic untested approach (if I understood your idea correctly):

HTML:

<div class="skew-container">
    <div class="img-container"></div>
</div>

CSS:

.skew-container { overflow: hidden; background: url(/images/skew.png) no-repeat scroll 0 0 transparent; height: 175px; width: 484px; }
.img-container { height: 100%; width: 100%; }
.img-container img { width: 100%; }

JS:

Now for JavaScript, there's a lot you can do. But I'm not sure if you'd like to move one of the two images around. Take a look at my little dice game. How far down the rabbit hole are you willing to go? http://jsfiddle.net/tive/GcDAb/

The approach shown in the example is a large image with all the dice values and colors. Moving the image is mathematical, like a matrix, using background-position to CSS. A little browser inconsistent but still doable.

Answer 2

you need to use 3D & perspective in your test :

body {
    transform-style: preserve-3d;
    perspective:50px;
}

with help from a pseudo, you can do something like this : http://jsfiddle.net/FCVa7/3/

Needs to be tuned to your needs ....

but best is look at SVG to make your shapes and then you can style them from style sheet