css3实现等腰三角形

忽然发现自己从前写等腰三角形都是一个边一个边试出来，为此记录一下

.shape{ 
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid #333;
}

 两腰相等，三角形高度随着底部高度变化，则底部有颜色其他两边为transparent，设置底部三角形如下：

 

设置顶部三角形如下：