效果图:
<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>