是否有可能创造一个剪切的div？

Question

是否可以像下图一样创建剪切/倾斜的标题div？

用于移动网站

Answer 1

是的，这是可能的：DEMO

＆＃13;

＆＃13;

   .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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;