0

次のようなシールドを作成したいと思います。

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;
}
4

1 に答える 1

0

私はそれを作りましたが、どれだけ似ているかわかりません：

http://jsfiddle.net/Yu7f9/

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

css の上記の部分は、トップエリアの高さを増やすために使用されます。

また、これを確認してください：http://blog.michelledinan.com/demos/css/triangles/#upIsosceles

于 2013-06-25T18:48:38.913 に答える