怎么利用CSS3绘制三角形

最近三角形挺火，很多地方都能碰到，如网页，微信，或者QQ空间的时间轴等地方都能看到，而且这些并不是图片插入进去的，那就需要用CSS来做了

<p class="bbb">111111111111</p>
<br/>
<div class="triangle-up">     <!--向上的三角--> </div>
<br/>
<div class="triangle-down">    <!--向下的三角--> </div>
<div class="triangle-left">    <!--向左的三角--> </div>
<div class="triangle-right">    <!--向右的三角--> </div>

<style>
    .bbb {
        width: 300px;
        height: 200px;
        background: forestgreen;
        margin: auto;
        padding: 10px;
        color: #FFFFFF;
        position: relative;

    }
    .bbb:before {
        content: '';
        display: block;
        position: absolute;
        left: 20px;
        top: -10px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top: 0 none;
        border-bottom-color: forestgreen;
    }
    .triangle-up {
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 30px solid green;
    }
    .triangle-down {
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid blue;
    }
    .triangle-left {
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-right: 20px solid red;
    }
    .triangle-right {
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid green;
    }
    .triangle-up, .triangle-down, .triangle-left, .triangle-right{  display: block; margin: auto;}
    </style>

效果图：