CSS画三角形

html代码：

<div class="root1"></div>
<br>
<div class="root2"></div>
<br>
<div class="root3"></div>
<br>
<div class="root4"></div>

css代码：

    .root1 {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid red;
      }
    .root2 {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 50px solid blue;
      }
      .root3 {
        width: 0;
        height: 0;
        border-bottom: 50px solid transparent;
        border-right: 50px solid yellow;
        border-top: 50px solid transparent;
      }
      .root4 {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-left: 50px solid pink;
        border-bottom: 50px solid transparent;
      }

image.png