創建使用邊框屬性

Question

我發現這個代碼片段在http://www.css3shapes.com/ 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; 
} 

Answer 1

這是強制css呈現三角形的技巧。退房#octagon：前{...}

的底部邊框寬度確定元素的高度。在側面上的邊界添加到定義的寬度賦予形狀的100像素的寬度。

你可以想象高度：0的作用就像是遠處的一個消失點。兩側的移向它，但在這種情況下，由於寬度（100）大於所述高度30。

三角形和八角形之間的差異是附加寬度大永遠不會達到它：

width: 40px; 

玩他的例子：http://jsfiddle.net/mXTrG/ 灰色是側邊框，藍色是底部邊框。

這有道理嗎？如果您有任何問題，請告訴我！

Answer 2

如果你改變一些你可以看到發生了什麼事情的顏色：在「後」有點像一個斜面相框的頂部： 框架的頂部是紅色，兩邊是綠色的&藍色，但沒有底部，並且幀中的'圖片'的大小爲寬度40，高度爲零（即沿着紅色位的底部邊緣的線）。

如果您添加缺少的底部，並使40的高度，你可以看到整個框架：