<style>    .triangle{        width: 0;        height: 0;        border-top: 50px solid blue;        border-right: 50px solid red;        border-bottom: 50px solid green;        border-left: 50px solid yellowgreen;    }    .triangle1{        width: 0;        height: 0;        border-bottom: 50px solid red;        border-left: 50px solid transparent;        border-right: 50px solid transparent;    }</style><body>    <div class="triangle"></div>    <div class="triangle1"></div></body>
Copy the code

trapezoidal

<style>
 .trapezoid{        width: 100px;        height: 0;        border-top: 90px solid green;        border-left: 40px solid transparent;        border-right: 40px solid transparent;    
<style>
<body>    <div class="trapezoid"></div></body>
Copy the code