css画三角形

效果图：

1.triangle-top

.triangle-top {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid red;
}

2.triangle-down

.triangle-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid red;
}

3.triangle-left

.triangle-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid red;
    border-bottom: 10px solid transparent;
}

4.triangle-right

.triangle-right {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid red;
    border-bottom: 10px solid transparent;
}

5.triangle-top-left

.triangle-topleft {
    width: 0;
    height: 0;
    border-top: 10px solid red;
    border-right: 10px solid transparent;
}

6.triangle-top-right

.triangle-topright {
    width: 0;
    height: 0;
    border-top: 10px solid red;
    border-left: 10px solid transparent; 
}

7.triangle-down-left

.triangle-downleft {
    width: 0;
    height: 0;
    border-bottom: 10px solid red;
    border-right: 10px solid transparent;
}

8.triangle-downright

.triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 10px solid red;
    border-left: 10px solid transparent;
}