css - 使用边框属性创建 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

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

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

Answer 2

强制css渲染三角形是一个技巧。查看#octagon:before { ... }

border-bottom-width 决定了元素的高度。两侧的边框添加到定义的宽度，使形状的宽度为 100 像素。

你可以想象 height: 0 在远处就像一个消失点。两边都向它移动，但在这种情况下永远不会到达它，因为宽度 (100) 大于高度 30。

三角形和八边形的区别在于额外的宽度：

width: 40px;

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

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