在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获得更全面的解释。