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{
    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>

 

 

 

posted @ 2019-08-15 15:40  少年工藤  阅读(7164)  评论(0)  编辑  收藏  举报