Renderings:
<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 ; / * if not rounded if desired longer than the width of the box, if you do not need to grow the fillet * / 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>