如何使用HTML+CSS画三角形

今天又有小姐姐在群里问css是如何画出三角形的，让我想起一开始在学校学HTML+CSS的时候，觉得学这些标签样式很无趣，认为不过是一些文字+图片，直到偶然在慕课网上面看了一个视频=>重拾CSS的乐趣[http://www.imooc.com/learn/588 ]，才对CSS3的美妙之处有了一些体会。
CSS画三角形我之前也有研究过，但是记忆总是不深刻，再次用到时，仍然需要找资料，今天加深一下印象，希望以后再用到的时候，可以从脑子里面一下子拿出来，666。

 /* 等腰三角形（箭头朝上）； */    #div1{        width: 0;        height: 0;        border-bottom: 100px solid cyan;        border-left: 50px solid transparent;        border-right: 50px solid transparent;    }

/* 等腰三角形（箭头朝下）； */   #div2{       width: 0;       height: 0;       border-top: 100px solid cyan;       border-left: 50px solid transparent;       border-right: 50px solid transparent;    }

 /* 等腰三角形（箭头朝左）； */    #div3{         width: 0;         height: 0;         border-right: 100px solid cyan;         border-top: 50px solid transparent;         border-bottom: 50px solid transparent;     }

 /* 等腰三角形（箭头朝右）； */    #div4{          width: 0;          height: 0;          border-left: 100px solid cyan;          border-top: 50px solid transparent;          border-bottom: 50px solid transparent;      }

  /* 直角三角形（箭头左上）； */    #div5{         width: 0;         height: 0;         border: 50px solid gray;         border-right: 50px solid transparent;         border-bottom: 50px solid transparent;     }

/* 直角三角形（箭头右下）； */   #div6{         width: 0;         height: 0;         border: 50px solid lightblue;         border-left: 50px solid transparent;         border-top: 50px solid transparent;     }

---

寄几敲出来了，以后应该不会忘了,开森。