css3 做出顶边倾斜的 梯形 div

 效果图:

css3 做出顶边倾斜的 梯形 div_第1张图片

 

<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">Hellodiv>
div>
body>
html>

 

 

 

转载于:https://www.cnblogs.com/ITCoNan/p/11358343.html

你可能感兴趣的