使用css3转换创建HTML5盾牌徽标

我想创建一个像这样的盾牌：

这是我迄今为止尝试过的，但我不能使底部区域成为箭头形状，也不能增加顶部区域的高度

我该怎么做

内容

#八角形{
宽度：100px；
高度：100px；
背景：蓝色；
}
#八角形：之前{
身高：100；
宽度：40px；
内容：“；
位置：绝对位置；
边框底部：0px纯蓝色；
左边框：30px纯白；
右边框：30px纯白；
}
#八角形：之后{
身高：0；
宽度：40px；
内容：“；
位置：绝对位置；
边框顶部：100px纯蓝色；
左边框：30px纯白；
右边框：30px纯白；
利润率：50px0；
}

我做的，不确定有多相似：

css的上述部分用于增加顶部区域的高度

---

此外，请选中此项：

为什么要创建防护罩？练习用？不完全是盾牌，只是形状而已。不是内部内容。鉴于您当前的进展，我建议使用SVG。我知道如何使用2个div和一个包装div，其中一个div是正方形，另一个div是css三角形。。。但是我想试试css3:）好的，我以前发现有人在做：）

#octagon:after {
    margin: 180px 0 0 0;
 }