正确的方法来创建五角大楼CSS3

Question

想要获得这样的标题形状。不想使用png。我知道有创建三角形的方法：

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

但是有没有正确的方法来获得这样的五角大楼？ 或者只有png会在这种情况下帮助我？