Is it possible to create a sheared div?

Question

Is it possible to create a header div that is sheared/oblique like in the image below?

Its for a mobile website

Myself

People do this by taking advantage of :after and :before pseudo-elements. Recently it is also possible by using css3-transform. css-tricks.com/examples/ShapesOfCSS – Descry

Thanx, this might just do the trick – Myself

@JVS: Whilst this could prove to be an interesting question, could you provide some markup as to any attempts so far? That way it would be less likely to be downvoted and/or closed – Pence

Actually, I am just designing this website. I needed to persuade the developer that there was a way to do it with code, else the whole design wouldnt go through. Therefore I dont have any code attempts. – Myself

Answer 1

Yes, this is possible: DEMO

   .wrapper {
overflow:hidden;
height:300px;
width:100%;
background: url(http://placekitten.com/g/300/300);
position:relative;
}
.top {
background:gray;
height:60%;
width:130%;
position:absolute;
top:-30%;
left:-5%;
transform:rotate(5deg);
border-bottom:10px solid white;
}
.text{
position:absolute;
top:20px;
right:10%;
padding:10px;
border-radius:10px;
border:5px solid white;
transition:all 0.8s;
}
.text:hover{
box-shadow:0 0 10px white;
}

<div class="wrapper">
    <div class="top"></div>
    <div class="text">MENU</div>
</div>

Pence