各類三角形

上三角： 

.up {

        width: 0;height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #000;
    }

<div class="up"></div>

下三角：

.down {
        width: 0;height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid #000;
    }
<div class="down"></div>

左三角：　　

.left {
        width: 0;height: 0;
        border-top: 50px solid transparent;
        border-right: 100px solid #000;
        border-bottom: 50px solid transparent;
    }
<div class="left"></div>

右三角：　　

 .right {
        width: 0;height: 0;
        border-top: 50px solid transparent;
        border-left: 100px solid #000;
        border-bottom: 50px solid transparent;
    }
<div class="right"></div>

左上：　　

.topLeft {
        width: 0;height: 0;
        border-top: 100px solid #000;
        border-right: 100px solid transparent;
    }
<div class="topLeft"></div>

右上：　　

.topRight {
        width: 0;height: 0;
        border-top: 100px solid #000;
        border-left: 100px solid transparent;
    }
<div class="topRight"></div>

左下：　　

.bottomLeft {
        width: 0;height: 0;
        border-bottom: 100px solid #000;
        border-right: 100px solid transparent;
    }
<div class="bottomLeft"></div>

　右下：　

.bottomRight {
        width: 0;height: 0;
        border-bottom: 100px solid #000;
        border-left: 100px solid transparent;
    }

<div class="bottomRight"></div>