image.png

    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <title>梯形形状</title>
    6.    <style type="text/css">
    7.      .div1{
    8.          width: 150px;
    9.          border-top: 100px solid red;
    10.          border-right: 100px solid transparent;
    11.          float: left;
    12.      }
    13.      .div2{
    14.          width: 150px;
    15.          border-bottom: 100px solid #000;
    16.          border-left: 100px solid transparent;
    17.          float: left;
    18.          margin-left: -100px;
    19.      }
    20.    </style>
    21. </head>
    22. <body>
    23.    <div class="div1"></div>
    24.    <div class="div2"></div>
    25. </body>
    26. </html>