css畫三角形

給塊級標籤設置樣式即可
上三角

    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;

下三角

    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;

左三角

    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;

右三角

    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;

左上直角

    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;

右上直角

    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 

左下直角

    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;

右下直角

    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;