Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Creating a slopy element

Creating a slopy element

Problem

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.

Problem courtesy of: Imran

Solution

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:


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

Solution courtesy of: r3bel

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Creating a slopy element

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×