css3做出顶边倾斜的梯形div 效果图:
<html>
<head>
<meta charset="utf-8">
<title>顶边倾斜的div梯形</title>
<style>
.box
{
border-radius:0px;
width:200px;
height:100px;
background-color:green;
position:relative;
}
.content{
borderbox
margin-top:50px;
width:200px;
padding-top:50px;
overflow:hidden;
border-radius:0px;
}
.box::before
{
position:absolute;
top:0;
left:0;
content:"";
z-index:-1;
width:210px; /*如果需要圆⾓的话不⽤⽐box的宽度长，如果不需要圆⾓需要增长*/
height:100px;
background-color:green;
transform:rotate(-10deg);
transform-origin:left top;
border-radius:0px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">Hello</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。