css - 使用 css3 转换创建 HTML5 盾牌标志

Question

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

http://www.red-team-design.com/wp-content/uploads/2011/01/HTML5-logo.png

这是我迄今为止尝试过的，但我无法将底部区域设为箭头形状，也无法增加顶部区域的高度。

我怎样才能做到这一点？

http://codepen.io/helloworld/pen/IxEpy

<div id="octagon">
  <div>content</div>
</div>

#octagon {
   width: 100px; 
   height: 100px; 
   background: blue;
}
#octagon:before {
   height: 100;
   width: 40px;
   content:"";
   position: absolute; 
   border-bottom: 0px solid blue;
   border-left: 30px solid white; 
   border-right: 30px solid white; 
}
#octagon:after {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-top: 100px solid blue; 
   border-left: 30px solid white;  
   border-right: 30px solid white; 
   margin: 50px 0 0 0;
}

Answer 1

我做到了，不知道它有多相似：

http://jsfiddle.net/Yu7f9/

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

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

另外，请检查：http ://blog.michelledinan.com/demos/css/triangles/#upIsosceles