css - 这个CSS如何运作

This web page使用垂直菜单，该菜单显示从当前所选菜单项指向页面的整洁的小箭头。我检查了Chrome中的代码，发现了以下内容。


对于显示箭头的锚点，标记为

对应的CSS是

aside li.current a:before
{
 content:"";
 border-color:transparent transparent transparent #fff;
 border-style:solid;
 border-width:10px;
 width:0;height:0;position:absolute;left:-30px;
}

我对这里发生的事情有一个很清楚的了解，但我还不能完全弄清楚最终结果是一个指向左侧的三角形。也许有人对CSS的理解比我能解释的更好？

最佳答案

您使用了右上角和透明底角的边框颜色，因此将采用左主div的颜色。就像您曾经使用过a：before一样，在开始每个标签之前，它会创建这种结构，其中没有内容，而且位置绝对，您可以将其设置为三角形视图...

如果从代码中删除透明并给边框加上颜色，则可以看到它原来就像简单的方形框一样。因此，这是使用CSS制作形状的CSS技巧。

关于css - 这个CSS如何运作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21330292/