Question

I am trying to achieve this effect in my webpage..

The red box is where I will be placing a menu, I would like the bottom of the red box to be slanted. The section on the right of the slant needs to be transparent as there may be an image in the background where the grey color is.

The only thing I can come up with is to rotate the element but that would also rotate the contents of the element which I do not want.. Only the bottom bg of the red element (which will be a solid color) should be slanted.

Answer 1

you can do it like that, just highlighted the rotated part blue, that you see what happens 😉

you might have to play with the top: and left: values if you change the size

edit: added a small menu example (really small ^^)

jsfiddle link

here is the html part:

<div id="menucontainer">
    <ul>
        <li>some</li>
        <li>menu</li>
        <li>here</li>
    </ul>
</div>
<div id="rotatedDiv">
</div>
<div id="background"></div>

and here the css part:

#menucontainer{
    position: relative;
    z-index: 100;
    background: red;
    height: 100px;
}

#menucontainer ul {
    position: absolute;
    bottom: 0px;
    left: 30px;    
}

#menucontainer li {
    list-style: none;
    margin-left: 10px;
    background: #123;
    display: inline-block;
}

#rotatedDiv {
    z-index: 99;
    background: blue;
    position: absolute;
    top: 14px;
    left: -5px;
    height: 90px;
    width: 200%;
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

#background {
    background: green;    
}

you might want to modify it in any way you can think of, but the main part should be clear i think 😉