圍繞CSS菜單中的第一個元素放置三角形箭頭

Question

我正在檢查使用CSS創建的下拉菜單中的this excellent demo，我很好奇，作者如何在每個菜單的第一個li元素周圍放置那些三角形箭頭？

我假設它做瓦特/一些:before或:after僞元素魔法，當我註釋掉CSS的下列行，它們就會消失：

#menu ul li:first-child > a:after { 
    content: ''; 
    position: absolute; 
    left: 40px; 
    top: -6px; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 6px solid #444; 
} 

但如何筆者得到他們是三角形？

Answer 1

最後3行做的伎倆：

border-left: 6px solid transparent; 
border-right: 6px solid transparent; 
border-bottom: 6px solid #444; 

記住，寬度和高度都爲0，所以你看到的是邊界。更多示例here。

Answer 2

它們是使用邊框創建的。邊界相交的地方它們相交45度。因此，通過製作具有不同顏色的大邊框的元素0x0像素，可以製作三角形。 See this answer以獲得更全面的解釋。