CSS slanted sidebar layout

Question

Is it possible to achieve this slanted sidebar layout with CSS? The right side would be the main content where I assume the slanted sidebar layout could overlap the extra. Thanks for reading!

Answer 1

Try something like this..

#shape {
    border-top: 100px solid green;
    border-right: 20px solid transparent;
    height: 0;
    width: 100px;
}

Fiddle: http://jsfiddle.net/3wLJj/1/

more info: http://css-tricks.com/examples/ShapesOfCSS/

Answer 2

If you are going to add some text, or elements inside the green div, it is better to do it this way than creating only a shape.

Fiddle

.main{
    width:60%;
    background:green;
    height:400px;
    position:relative;
    color:white;
}
.main:after{
    content:'';
    position:absolute;
    right:-40px;
    border-top: 400px solid green;
    border-right: 40px solid transparent;
    
}
.side{
    margin-left:10%;
    width:30%;
}