纯CSS制作三角形

1.锐角三角形
原理：将块元素分成四部分，然后需要哪边哪边solid，其他边均为transparent

#demo {
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-left-color: red;
      }

上面的边框颜色顺序为上、右、下、左，然后如果想要哪一边保留的话，那么就让那一边出现颜色

2.直角三角形
总体上分成两块，需要哪两边，就把哪两边拿出来加上颜色，其他边均为透明色

 #demo {
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-bottom-color: red;
        border-left-color: red;
      }