是否可以创建一个剪切的 div？答案

【问题标题】：Is it possible to create a sheared div?是否可以创建一个剪切的 div？
【发布时间】：2015-01-29 09:47:25
【问题描述】：

是否可以创建如下图所示的剪切/倾斜的标题 div？

适用于移动网站

【问题讨论】：

人们通过利用 :after 和 :before 伪元素来做到这一点。最近也可以使用 css3-transform。 css-tricks.com/examples/ShapesOfCSS
谢谢，这可能只是解决问题
@JVS：虽然这可能被证明是一个有趣的问题，但您能否就迄今为止的任何尝试提供一些标记？这样就不太可能被否决和/或关闭
其实我只是在设计这个网站。我需要说服开发人员有一种方法可以用代码来完成，否则整个设计将无法通过。因此我没有任何代码尝试。

【解决方案1】：

是的，这是可能的：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>

【讨论】：