-1

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

Its for a mobile website

enter image description here

jbutler483
  • 24,074
  • 9
  • 92
  • 145
JVS
  • 121
  • 6
  • People do this by taking advantage of `:after` and `:before` pseudo-elements. Recently it is also possible by using css3-transform. http://css-tricks.com/examples/ShapesOfCSS/ – sarveshseri Jan 29 '15 at 09:56
  • Thanx, this might just do the trick – JVS Jan 29 '15 at 10:06
  • 2
    @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 – jbutler483 Jan 29 '15 at 10:29
  • 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. – JVS Jan 29 '15 at 10:45

1 Answers1

3

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>
jbutler483
  • 24,074
  • 9
  • 92
  • 145