各种三角形

上三角： 

.up {

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

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

下三角：

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

左三角：　　

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

右三角：　　

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

左上：　　

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

右上：　　

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

左下：　　

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

　右下：　

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

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