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>