四个三角形

//html <div class="triangle-4"></div>

      //css
      .triangle-4 {
        width: 0;
        height: 0;
        display: inline-block;
        border-top: solid 100px red;
        border-right: solid 100px blue;
        border-bottom: solid 100px black;
        border-left: solid 100px salmon;
      }
    

三角形

//html <div class="triangle"></div>

      //css
      .triangle {
        width: 0;
        height: 0;
        display: inline-block;
        border-right: solid 100px transparent;
        border-bottom: solid 100px black;
        border-left: solid 100px transparent;
      }
    

梯形

//html <div class="trapezoid"></div>

      //css
      .trapezoid {
        width: 100px;
        height: 0;
        display: inline-block;
        border-right: solid 100px transparent;
        border-bottom: solid 100px black;
        border-left: solid 100px transparent;
      }