当前位置 博文首页 > u011767319的博客：css3 使用的个人笔记
图片展示效果
<html>
<head>
<meta charset="utf-8">
<title>顶边倾斜的div梯形</title>
<style>
.box
{
border-radius:0px;
width:200px;
height:100px;
background-color:green;
position:relative;
}
.content{
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>
