使用边框属性创建css3形状

Question

我在http://www.css3shapes.com/找到了这段代码片段，但我无法理解它背后的逻辑。我的意思是我知道前后选择器的功能。我感到困惑的是为什么我们在代码中有{ height:0; width:40px; }。如果有人能对这段代码作出完整的解释，我们将不胜感激。

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

Answer 1

如果您更改了一些颜色，您可以看到正在发生的事情：'after'位就像是斜面相框的顶部： 框架的顶部是红色，两侧是绿色和蓝色，但没有底部，框架中“图片”的大小为宽度40，高度为零（即沿红色位底边的线）。

如果添加缺失的底部，并使高度为40，则可以看到整个框架：

Answer 2

迫使css呈现三角形形状是一种技巧。查看#octagon：{...}

之前

border-bottom-width确定元素的高度。边上的边框添加到定义的宽度，使形状的宽度为100px。

你可以想象高度：0就像远处的消失点一样。两个侧面朝向它移动，但在这种情况下，由于宽度（100）大于高度30，因此永远不会到达它。

三角形和八边形之间的差异是附加宽度：

width: 40px;

玩他的例子：http://jsfiddle.net/mXTrG/ 灰色是侧边框，蓝色是底边框。

这有意义吗？如果您有任何问题，请告诉我们！