Question

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

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

这是我到目前为止所尝试的但我不能使底部区域成为箭头形状而且我无法增加其高度的顶部区域。

我该怎么做？

<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

使用css3 transform创建HTML5盾牌徽标

1 个答案: