使用边框属性创建css3形状

我在上找到了这些代码片段，但我无法理解其背后的逻辑。我的意思是我知道前后选择器的功能。我感到困惑的是为什么代码中有

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

---

强制css渲染三角形是一个技巧。查看#八角形：在{…}之前

边框底部宽度决定元素的高度。侧面的边框添加到定义的宽度，使形状的宽度为100px

你可以想象高度：0就像远处的一个消失点。两侧都向其移动，但在这种情况下，永远无法到达，因为宽度（100）大于高度30

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

width: 40px;

以他的例子为例： 灰色是侧边框，蓝色是底边框

---

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

强制css渲染三角形是一个技巧。查看#八角形：在{…}之前

边框底部宽度决定元素的高度。侧面的边框添加到定义的宽度，使形状的宽度为100px

你可以想象高度：0就像远处的一个消失点。两侧都向其移动，但在这种情况下，永远无法到达，因为宽度（100）大于高度30

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

width: 40px;

以他的例子为例： 灰色是侧边框，蓝色是底边框

---

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

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

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

---

如果您更改一些颜色，您可以看到发生的情况：“后”位类似于斜切画框的顶部： 框架顶部为红色，侧面为绿色和蓝色，但没有底部，框架中“图片”的大小为宽度40，高度为零（即沿红色位底部边缘的线）

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