是否可以创建剪切的div? [英] Is it possible to create a sheared div?
本文介绍了是否可以创建剪切的div?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以创建如下图所示剪切/倾斜的标题div?
Is it possible to create a header div that is sheared/oblique like in the image below?
它用于移动网站
推荐答案
是的,这是可能的: 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>
这篇关于是否可以创建剪切的div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文