怎么利用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:;
         height:;
         border: 10px solid transparent;
         border-top: 0 none;
         border-bottom-color: forestgreen;
     }
     .triangle-up {
         width:;
         height:;
         border-left: 30px solid transparent;
         border-right: 30px solid transparent;
         border-bottom: 30px solid green;
     }
     .triangle-down {
         width:;
         height:;
         border-left: 20px solid transparent;
         border-right: 20px solid transparent;
         border-top: 20px solid blue;
     }
     .triangle-left {
         width:;
         height:;
         border-top: 20px solid transparent;
         border-bottom: 20px solid transparent;
         border-right: 20px solid red;
     }
     .triangle-right {
         width:;
         height:;
         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>

效果图：